Esta es una interfaz de usuario que se muestra en el borde de la pantalla para notificar al usuario que la acción del usuario (guardar, enviar, etc.) se ha completado con éxito.

Vista previa

Casos de uso y características

• Comentarios del sistema: comunica inmediatamente los resultados exitosos de las acciones del usuario, como “Guardado” o “Envío completado”.
• Notificación de proceso asíncrono: Ideal para casos en los que desea recibir una notificación de forma discreta sin interferir con el trabajo del usuario, como cuando un proceso se ha completado en segundo plano.
• Desaparición automática: normalmente desaparece automáticamente después de un cierto período de tiempo para liberar espacio en la pantalla.

Puntos claves del diseño y UX (Design & UX)

• Ubicación discreta: colóquelo en la esquina de la pantalla (por ejemplo, abajo a la derecha o arriba a la derecha) para que no interfiera con el contenido o el trabajo principal.
• Claridad visual: utilice iconos y bordes verdes (emerald o green) para indicar el éxito y comunicar intuitivamente notificaciones positivas.
• Función de cierre manual: proporciona un botón × (cerrar) para que los usuarios puedan descartar las notificaciones ellos mismos, dándoles una mayor sensación de control.

Cómo personalizar (Guía de personalización)

• Color por estado: Al reemplazar la clase Tailwind, puedes responder a varias condiciones cambiando el color a rojo (red) para notificaciones de error, amarillo (yellow) para advertencias y azul (blue) para información.
• Agregar animación: puede agregar una animación que se deslice desde la parte inferior cuando se muestra o una animación que se desvanece cuando desaparece usando CSS o JS.

Código de implementación (Implementación)

<div class="flex items-center w-full max-w-sm p-4 text-gray-800 bg-white dark:bg-zinc-900 dark:text-gray-200 rounded-lg shadow-lg border border-emerald-100 dark:border-emerald-900/30" role="alert">
<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-emerald-500 bg-emerald-100 rounded-lg dark:bg-emerald-800/30 dark:text-emerald-400">
  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
  </svg>
</div>
<div class="ml-3 text-sm font-medium">Successfully saved changes.</div>
<button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-zinc-900 dark:hover:bg-zinc-800">
  <span class="sr-only">Close</span>
  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>