Low battery toast

The battery drains until it turns red and offers to switch on power saving with a toggle.

Settings

Main color#ef4444

Secondary color#facc15

Size16px

Speed1x

Text

Code

index.html

<div class="uv-qbt"><button type="button" class="fire">Show again</button><div class="tt" role="alert"><span class="bt" aria-hidden="true"><i></i></span><span class="tx"><b>Low battery</b><small>10% left, about 25 minutes</small></span><label class="sw"><span>Saver</span><input type="checkbox" role="switch"><i></i></label></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.

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

Device companions, e-scooter apps, wearables and smart home dashboards need to warn about low battery in a way that is noticed but calm. This toast animates the battery from green through yellow to a red sliver, blinks it three times, states the percentage and time left, and offers a power saving switch right there.

Turning the switch on recolors the battery to show the change took effect. The toast uses role alert because the message is time sensitive, and the switch is a native checkbox with the switch role.