Toast mit Warnleuchte im Cockpit
Wie im Kombiinstrument: Die gelbe Warnleuchte macht ihren Lampentest und der Reifen mit zu wenig Druck blinkt weiter.
Einstellungen
Code
<div class="uvq09-car"><button type="button" class="fire">Erneut zeigen</button><div class="tt" role="alert"><span class="ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.5 5C4.5 7.2 3.5 9.6 3.5 12.2c0 2.4.8 4.4 2 6M17.5 5c2 2.2 3 4.6 3 7.2 0 2.4-.8 4.4-2 6"/><path d="M5 18.4h14M5.5 20.6l.8-2.2M9.5 20.6l.4-2.2M14.5 20.6l-.4-2.2M18.5 20.6l-.8-2.2M12 8v5.2M12 15.9v.01"/></svg></span><span class="tx"><b>Niedriger Reifendruck</b><small>Vorne links: 1,6 bar</small><button type="button" class="ok">Verstanden</button></span><span class="cr" aria-hidden="true"><svg viewBox="0 0 40 64"><rect class="w lo" x="2" y="10" width="6" height="12" rx="2"/><rect class="w" x="32" y="10" width="6" height="12" rx="2"/><rect class="w" x="2" y="43" width="6" height="12" rx="2"/><rect class="w" x="32" y="43" width="6" height="12" rx="2"/><path class="bd" d="M10 7c0-3 3-5 10-5s10 2 10 5v50c0 3-3 5-10 5s-10-2-10-5z"/><path class="gl" d="M12.5 20.5c2.5-2.2 12.5-2.2 15 0l-1.6 7H14.1zM13.6 45.5h12.8l1.1 6c-2.5 1.7-12.5 1.7-15 0z"/></svg></span></div></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Toasts
Alle ansehen: ToastsWofür du ihn nutzen kannst
Symbole im Armaturenbrett erfasst man im Bruchteil einer Sekunde, deshalb taugen sie gut als Vorbild für dringende Hinweise. Dieser Toast zeigt ein dunkles Instrumentenfeld, ein gelbes Reifendrucksymbol mit flackerndem Lampentest und eine Draufsicht des Autos, in der das betroffene Rad pulsiert. Er passt zu Flottensoftware, Apps für vernetzte Autos und Smart-Home-Sensoren.
Die Hauptfarbe ist das Warngelb, die zweite Farbe markiert die Reifen ohne Problem. Da er role alert nutzt, setze ihn nur für Probleme ein, die sofort Aufmerksamkeit brauchen, und verknüpfe den Button Verstanden mit deiner Bestätigung.