Success Toast Notification

This is a UI that displays on the edge of the screen to notify the user that the user’s action (save, send, etc.) has been successfully completed.

Preview

Use Cases & Features

• System Feedback: Immediately communicates success results for user actions, such as “Saved” or “Submission completed.”
• Asynchronous process notification: Ideal for cases where you want to be notified discreetly without interfering with the user’s work, such as when a process has completed in the background.
• Auto-disappear: Usually automatically fades out after a certain period of time to free up screen space.

Key points of design and UX (Design & UX)

• Discreet placement: Place it in the corner of the screen (e.g. bottom right or top right) so it doesn’t interfere with the main content or work.
• Visual clarity: Use green (emerald or green) icons and borders to indicate success to intuitively communicate positive notifications.
• Manual close function: Provides an × (close) button so users can dismiss notifications themselves, giving them a greater sense of control.

How to customize (Customization Guide)

• Color by status: By replacing the Tailwind class, you can respond to various conditions by changing the color to red (red) for error notifications, yellow (yellow) for warnings, and blue (blue) for information.
• Adding animation: You can add an animation that slides in from the bottom when displayed or a fade-out animation when it disappears using CSS or JS.

Implementation code (Implementation)

<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>