1. Mensajes de Error (Muestras 1-10)
#1 Alerta Bloque Estándar
Error
Algo salió mal al procesar su solicitud.
#2 Alerta con Icono
#3 Input Invalido (Estilo React Hook Form)
Este campo es requerido.
#4 Alerta Cerrable
Sin conexión
#5 Sumario de Errores (Zod)
Se encontraron 2 errores:
- La contraseña debe tener 8 caracteres.
- El email ya está registrado.
#6 Error Inline Sutil
#7 Botón Fallido (Shake)
#8 Estado de Tarjeta Crítica
Error del Servidor 500
No pudimos cargar los datos.
#9 Badge Estado
Pago Rechazado#10 Toast Notification
Borrado fallido
El item está en uso.
2. Mensajes de Éxito (Muestras 11-20)
#11 Banner Clásico
#12 Input Validado Correctamente
Dominio disponible.
#13 Modal/Card Éxito
Pago Enviado
Transacción #123456
#14 Pill Notification
#15 Paso Completado
#16 Carga de Archivo Exitosa
reporte.pdf
100% Subido
#17 Botón Estado Éxito
#18 Texto Feedback
#19 Banner Acento Inferior
Bienvenido a bordo
Tu cuenta ha sido verificada correctamente.
#20 Indicador en Avatar
3. Advertencias (Muestras 21-30)
#21 Warning Clásico
Tu suscripción vence en 3 días.
#22 Advertencia con Botón
Espacio de almacenamiento bajo
Te queda menos del 10% de espacio disponible.
#23 Input Estado Precaución
Débil, pero aceptable.
#24 Bloq Mayús Activado
#25 Toast Advertencia
#26 Etiqueta Beta
Editor IA
BETA#27 Cambios sin guardar (Sticky)
#28 Tooltip Warning
#29 Lista de Pendientes
Requisitos faltantes
- Verificar teléfono
- Añadir foto de perfil
#30 Alerta Tipo de Archivo
documento.exe
Este tipo de archivo puede ser peligroso.
4. Mensajes de Información (Muestras 31-40)
#31 Info Clásica
Nota:
El mantenimiento comenzará a las 10 PM.
#32 Tip del día
¿Sabías qué?
Puedes usar Ctrl+K para abrir el menú de búsqueda rápida en cualquier momento.
#33 Icono de Ayuda
#34 Empty State Info
No hay mensajes nuevos.
#35 Mensaje de Carga
#36 Banner con Link
Hemos actualizado nuestros términos. Leer más.
#37 Pill Tag
#38 Sidebar Callout
Necesitas ayuda?
Contacta a nuestro soporte 24/7.
#39 Estilo Cookies
#40 Input Hint
Solo visible para administradores.
5. Tooltips y Validación Interactiva (Muestras 41-50)
#41 Tooltip Hover
#42 Fortaleza Contraseña
Débil
#43 Contador de Caracteres
#44 Validación al escribir
Comprobando disponibilidad...
#45 Validación Switch
Debes aceptar.
#46 Grupo Checkbox (React Hook Form)
Intereses (Selecciona 1)
Selección requerida
#47 Floating Label Error
#48 Comparación Campos
#49 Ayuda al Enfocar
#50 Footer Resumen