Toast de testigo del coche
Como en el cuadro de mandos: el testigo ámbar hace la prueba de luces y la rueda con poca presión sigue parpadeando.
Ajustes
Código
<div class="uvq09-car"><button type="button" class="fire">Mostrar de nuevo</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>Presión baja en un neumático</b><small>Delantera izquierda: 1,6 bar</small><button type="button" class="ok">Entendido</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 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
Quien conduce lee los símbolos del salpicadero en un instante, y por eso son un buen modelo para los avisos urgentes. Este toast usa un panel de instrumentos oscuro, el símbolo ámbar de presión de neumáticos que parpadea como en la prueba de luces y una vista del coche desde arriba donde late la rueda afectada. Encaja en gestión de flotas, apps de coche conectado y sensores domésticos.
El color principal es el ámbar del testigo y el secundario marca las ruedas que están bien. Como usa role alert, resérvalo para problemas que piden atención ya y conecta el botón Entendido con tu propia acción de confirmar.