Toast
Notificaciones toast apilables y banners de mensajes flash para retroalimentación al usuario. Soporta variantes de éxito, error, advertencia e información con posición configurable, duración de cierre automático y múltiples estilos visuales.
Predeterminado
Notificación toast individual apilable con acento de borde izquierdo
███
█████ █████████ █████████
██████
███ ██████ ███████████████████ ████████ █████████ ████████ ████████ ██
███ ██████ ███████████████████ ██████ ████████ ████████ ██████████ ████ ███████ ████████ ██████ ██
███ ██████ ███████████████████ ████████ █████ ██████ ████████ ██████ █████████ █ ██
██
██
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ██████ █ █ █████████ █ █████ ███████ ████████ ████ █ █
█████████ █
██████████████████████████ █ ███
████████████████████████████ █ █████████████████████
█████████████████████████████ █ ████████ █████ █████ █████████ █████ █████
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████
██████ ██████ █ █
████████████ █ █████ ████████ ████████ ████ ██
█████████ █ █████ ███████ ████████ ████ █
█
█████████ █
████ ██████████ █████████████ ███
███████████████████████
██████████████████████████████ █████████ ███
████████████████████████████████████ █████████████████████████
████████████
██████████████████████
█████ ██████████ ████████████ ████
███ ██████████████████████ ██
███████
████ █████████████ █████████
█ ██████████████████████ ████
█████ ██████████████ █ ███████████████████
████████ █ ██████████ █████ ███████ ████████████
███████████ ███████ █████████ █████████ █████████████ █████████
███ ████████████████████ ██████ ████ ████████ ██████ ████████████ █████ █████████ █████ ████████
██████ █ █████
████████ █ ███████
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ██████ █ █ █████████ █ █████ ███████ ████████ ████ █ █
█████████ █
██████████████████████████ █ ███
████████████████████████████ █ █████████████████████
█████████████████████████████ █ ████████ █████ █████ █████████ █████ █████
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████
██████ ██████ █ █
████████████ █ █████ ████████ ████████ ████ ██
█████████ █ █████ ███████ ████████ ████ █
█
█████████ █
Flash estándar
Banner de ancho completo en la parte superior de la página para mensajes flash de Rails
███
█████ ████████ █████ █████████ █████████
██████████ ██████ ██ ███ ██ ████ ███ █████ █████ █████████
███████ █ █████ ████ ███ ███████ ████ ███████ ██ █ ███████████ ███████
██████
███ ██████ ██████████████████████████████████ █████████ █████ ██
███ ██████ ██████████████████████████████████ █████████ █ ███████ ████████ ██ █████████████ ████ ██
███ ██████ ██████████████████████████████████ █████████ █ ██████ ███████████ ██████ █████████ ██ █████████ ████ ██
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ██████ █ █ █████████ █ █████ ███████ ████████ ████ █ █
█████████ █
██████████████████████████ █ ███
████████████████████████████ █ █████████████████████
█████████████████████████████ █ ████████ █████ █████ █████████ █████ █████
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████
██████ ██████ █ █
████████████ █ █████ ████████ ████████ ████ ██
█████████ █ █████ ███████ ████████ ████ █
█
█████████ █
█ ██████████████████████ ████
█████ ███████████████████████████ █ ███████████████████
███████████ █ █
███████ █████████
████████ █████████
██████ ███████
██████ █████████
████████ ████████
████████
██ ██ █████████████ ██
████ █████████████████
█████████████████████████████
████████████████████████████████████████ ████████████ ███
████████████████████████████████████ ████████ ████
██ █████████████ ██ ██████ ████████ ██
████ ██████████ ████████████████████ ███
█████████████████████████████████
████████████
██████████████████████
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ██████ █ █ █████████ █ █████ ███████ ████████ ████ █ █
█████████ █
██████████████████████████ █ ███
████████████████████████████ █ █████████████████████
█████████████████████████████ █ ████████ █████ █████ █████████ █████ █████
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████
██████ ██████ █ █
████████████ █ █████ ████████ ████████ ████ ██
█████████ █ █████ ███████ ████████ ████ █
█
█████████ █
Flash toast
Notificaciones toast apilables posicionadas en una esquina para mensajes flash de Rails
███
█████ █████ █████████ █████████
█████████████████ █████ ██ ████████ █████ █████████████ ████ █ █████ █████
███████ ████ ███████ ██ █ ███████████ █████ ██ █ █████ ██████ █████████
██████
████ ██████ █████████████████████████ █████████ █████ ██
████ ██████ █████████████████████████ █████████ █ ███████ ████████ ██ █████████ ██████████ ██
████ ██████ █████████████████████████ █████████ █ ██████ ███████████ ██████ █████████ ██ █████████ █████████████ ██
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ██████ █ █ █████████ █ █████ ███████ ████████ ████ █ █
█████████ █
██████████████████████████ █ ███
████████████████████████████ █ █████████████████████
█████████████████████████████ █ ████████ █████ █████ █████████ █████ █████
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████
██████ ██████ █ █
████████████ █ █████ ████████ ████████ ████ ██
█████████ █ █████ ███████ ████████ ████ █
█
█████████ █
██ ██ █████████████ ██
████ ██████████ █████████████████ ███
█████████████████████████████
████████████████████████████████████████ ████████████ ███
████████████████████████████████████ ████████ ████
████ ██████████████████
██ █████████████ ██ ██████ ████████ ██
████ ██████████ ███████████████████ ███
█████████████████████████████████
████████████
█ ██████████████████████ ████
█████ ████████████████████████ █ ███████████████████
███████████ █ █
███████ █████████
████████ █████████
██████ ███████
██████ █████████
████████ ████████
████████
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ██████ █ █ █████████ █ █████ ███████ ████████ ████ █ █
█████████ █
██████████████████████████ █ ███
████████████████████████████ █ █████████████████████
█████████████████████████████ █ ████████ █████ █████ █████████ █████ █████
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████
██████ ██████ █ █
████████████ █ █████ ████████ ████████ ████ ██
█████████ █ █████ ███████ ████████ ████ █
█
█████████ █
Registro de Cambios
- v1.1.0: Added standard-flash and toast-flash styles for Rails flash messages
- v1.0.0: Initial release with success, error, warning, info variants
- Auto-dismiss with configurable duration
- Pause auto-dismiss on hover
- Smooth enter/exit animations
- Accessible with role="alert" and aria-live
Obtener Acceso Completo
Desbloquea el código fuente de este componente y todos los demás. Un solo pago para acceso de por vida.
Obtener Acceso