Componente de alerta para Figma: 70 variantes

Visión general

Las alertas y notificaciones (toasts) son componentes esenciales para comunicar información importante a los usuarios.

Las alertas proporcionan mensajes persistentes que requieren atención del usuario, mientras que los toasts son notificaciones temporales que desaparecen automáticamente.

Alertas

Las alertas se utilizan para mensajes importantes que requieren atención del usuario, como:

- Errores en formularios
- Advertencias del sistema
- Confirmaciones de éxito
- Información crítica

Disponemos de cuatro niveles de severidad: éxito (verde), información (azul), advertencia (amarillo) y error (rojo).

Notificaciones (Toasts)

Los toasts son mensajes no intrusivos que aparecen temporalmente, típicamente en una esquina de la pantalla.

Características clave:
- Duración: 4-6 segundos
- Posición: Superior derecha por defecto
- Contenido: Breve y conciso
- Interacción: Pueden incluir acciones rápidas como "Deshacer"

Accesibilidad y Responsividad

Estos patrones de Figma muestran cómo presentar alertas y toasts. Al implementar la interfaz, comprueba el contraste y añade la región o el rol semántico adecuado a cada mensaje.

Prueba la legibilidad, los anuncios del lector de pantalla, el foco y el cierre en móvil y escritorio.

Integración

En Figma, las alertas y toasts existen como variantes estructuradas vinculadas a estilos globales de texto y color.

El archivo de Figma no incluye código Tailwind. Puedes trasladar los estilos a tus propias clases y añadir el comportamiento y las animaciones que necesite tu producto.

Mejores Prácticas

- Usar alertas para mensajes persistentes que requieren atención del usuario
- Usar toasts para notificaciones transitorias que no requieren acción
- Mantener estilos consistentes en todos los niveles de severidad
- Asegurar ratios de contraste adecuados para accesibilidad
- Limitar la duración de toasts a 4-6 segundos para mejor experiencia de usuario
- Proporcionar opciones claras para descartar alertas