Toast
Notificaciones de posición fija con variantes de acento, pistas de icono y control de descarte.
Variantes
modo demo — renderizado en línea para documentación
Proyecto creado
Almacenamiento casi lleno
Pago fallido
Nueva versión disponible
Posiciones
La prop position ancla el toast a una esquina del viewport. Los ejemplos siguientes usan demo para renderizarse en línea; en producción serían position: fixed.
top-right
top-right toast
bottom-right
bottom-right toast
top-left
top-left toast
bottom-left
bottom-left toast
Con y sin mensaje
Guardado
Sincronizado
Uso
<Toast variant="success" title="Project created" message="Published successfully." />
<Toast variant="danger" title="Payment failed" message="Your card was declined." />
<Toast variant="warning" position="bottom-left" title="Storage almost full" message="85% of quota used." />
<Toast demo variant="info" title="Inline demo" message="Renders static for documentation." />Props
| Prop | Tipo | Predeterminado | Descripción |
|---|---|---|---|
variant | 'success' | 'warning' | 'danger' | 'info' | 'info' | Color de acento, glifo de icono y rol (alert para danger, status en caso contrario). |
title | string | — | Texto principal en negrita de la notificación. |
message | string | — | Línea de detalle secundaria opcional. |
position | 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left' | 'top-right' | Esquina del viewport que se usa cuando el toast tiene posición fija. |
demo | boolean | false | Cambia a position: static para que las páginas de documentación puedan mostrar los toasts en línea. |