Batería bajaQueda un 10 %, unos 25 minutos
HTML + CSSToasts
Toast de batería baja
La pila se vacía hasta quedar en rojo y ofrece activar el modo ahorro con un interruptor.
Ajustes
16px
1x
Código
<div class="uv-qbt"><button type="button" class="fire">Mostrar de nuevo</button><div class="tt" role="alert"><span class="bt" aria-hidden="true"><i></i></span><span class="tx"><b>Batería baja</b><small>Queda un 10 %, unos 25 minutos</small></span><label class="sw"><span>Ahorro</span><input type="checkbox" role="switch"><i></i></label></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Toasts
Ver todos: ToastsDónde usarlo
Las apps de dispositivos, patinetes eléctricos, wearables y casas conectadas necesitan avisar de la batería baja de forma visible pero tranquila. Este toast anima la pila de verde a amarillo hasta dejar una franja roja, la hace parpadear tres veces, dice el porcentaje y el tiempo que queda y ofrece ahí mismo un interruptor de ahorro.
Al activar el interruptor, la pila cambia de color para enseñar que ha tenido efecto. El toast usa role alert porque el aviso es urgente, y el interruptor es un checkbox nativo con rol switch.