AIMRAN
HTML + CSSToasts

Dashboard warning light toast

Like a car dashboard: the amber warning light runs its bulb check and the underinflated tyre keeps blinking.

Settings

16px
1x

Code

<div class="uvq09-car"><button type="button" class="fire">Show again</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>Low tyre pressure</b><small>Front left: 1.6 bar</small><button type="button" class="ok">Got it</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 for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

Markdown version with all the code, for AI assistants

More in Toasts

See all Toasts

Animated toast notification

ToastsReact + Motion

Elastic success toast

ToastsHTML + CSS

Undo toast with timer

ToastsHTML + CSS

Upload progress toast

ToastsHTML + CSS

Shake error toast

ToastsHTML + CSS

Incoming message toast

ToastsHTML + CSS

Stacked toasts

ToastsHTML + CSS

Island pill toast

ToastsHTML + CSS

Where to use it

Drivers read dashboard symbols in a split second, which makes them a strong model for urgent alerts. This toast uses a dark instrument panel, an amber tyre pressure symbol that flickers through a bulb check, and a top view of the car where the affected wheel pulses. It suits fleet software, connected car apps, smart home sensors and IoT dashboards.

The main color is the warning amber and the second color marks the tyres that are fine. Because it uses role alert, keep it for problems that need attention now, and point the Got it button at your own acknowledge action.