Toasts

Copy-paste ready toast notification components

← Back to Home

Basic Toasts

Simple notification toasts with different variants

Successfully saved!

Error occurred!

Warning message

Information

HTML

<!-- Success Toast -->
<div class="bg-white rounded-lg shadow-lg border-l-4 border-green-500 p-4">
  <div class="flex items-start">
    <div class="flex-shrink-0">
      <svg class="h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <div class="ml-3 flex-1">
      <p class="text-sm font-medium text-gray-900">Successfully saved!</p>
    </div>
  </div>
</div>

Toasts with Description

Include additional details in your toast messages

Order completed

Your order has been successfully placed and is being processed.

New update available

A new software update is ready to be installed.

HTML

<div class="bg-white rounded-lg shadow-lg border-l-4 border-green-500 p-4">
  <div class="flex items-start">
    <div class="flex-shrink-0">
      <svg class="h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">...</svg>
    </div>
    <div class="ml-3 flex-1">
      <p class="text-sm font-medium text-gray-900">Order completed</p>
      <p class="mt-1 text-sm text-gray-500">Your order has been successfully placed.</p>
    </div>
  </div>
</div>

Dismissible Toasts

Toasts with close button

Successfully saved!

Your changes have been saved.

HTML

<div class="bg-white rounded-lg shadow-lg border-l-4 border-green-500 p-4">
  <div class="flex items-start">
    <div class="flex-shrink-0">
      <svg class="h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">...</svg>
    </div>
    <div class="ml-3 flex-1">
      <p class="text-sm font-medium text-gray-900">Successfully saved!</p>
      <p class="mt-1 text-sm text-gray-500">Your changes have been saved.</p>
    </div>
    <div class="ml-4 flex-shrink-0 flex">
      <button class="inline-flex text-gray-400 hover:text-gray-500">
        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">...</svg>
      </button>
    </div>
  </div>
</div>

Toasts with Actions

Include action buttons in your toasts

Update available

A new version is available.

Connection lost

Please check your internet connection.

HTML

<div class="bg-white rounded-lg shadow-lg border-l-4 border-blue-500 p-4">
  <div class="flex items-start">
    <div class="flex-shrink-0">
      <svg class="h-5 w-5 text-blue-500" fill="currentColor" viewBox="0 0 20 20">...</svg>
    </div>
    <div class="ml-3 flex-1">
      <p class="text-sm font-medium text-gray-900">Update available</p>
      <p class="mt-1 text-sm text-gray-500">A new version is available.</p>
      <div class="mt-3 flex space-x-3">
        <button class="px-3 py-1.5 text-sm font-medium text-blue-600 hover:text-blue-700">
          Update now
        </button>
        <button class="px-3 py-1.5 text-sm font-medium text-gray-600 hover:text-gray-700">
          Later
        </button>
      </div>
    </div>
  </div>
</div>

Toast Positions

Different positioning options for toasts

Top Right (Default)

Top right toast

fixed top-4 right-4

Top Left

Top left toast

fixed top-4 left-4

Bottom Right

Bottom right toast

fixed bottom-4 right-4

Bottom Left

Bottom left toast

fixed bottom-4 left-4

Top Center

Top center toast

fixed top-4 left-1/2 -translate-x-1/2

HTML

<!-- Top Right -->
<div class="fixed top-4 right-4 z-50">
  <div class="bg-white rounded-lg shadow-lg border-l-4 border-green-500 p-4">
    <p class="text-sm font-medium text-gray-900">Top right toast</p>
  </div>
</div>

<!-- Bottom Right -->
<div class="fixed bottom-4 right-4 z-50">
  <div class="bg-white rounded-lg shadow-lg border-l-4 border-green-500 p-4">
    <p class="text-sm font-medium text-gray-900">Bottom right toast</p>
  </div>
</div>

<!-- Top Center -->
<div class="fixed top-4 left-1/2 -translate-x-1/2 z-50">
  <div class="bg-white rounded-lg shadow-lg border-l-4 border-green-500 p-4">
    <p class="text-sm font-medium text-gray-900">Top center toast</p>
  </div>
</div>

Colored Background Toasts

Toasts with solid background colors

Successfully saved!

Error occurred!

Warning message

Information

Dark mode toast

HTML

<!-- Success with Colored Background -->
<div class="bg-green-500 rounded-lg shadow-lg p-4">
  <div class="flex items-start">
    <div class="flex-shrink-0">
      <svg class="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 20 20">...</svg>
    </div>
    <div class="ml-3 flex-1">
      <p class="text-sm font-medium text-white">Successfully saved!</p>
    </div>
  </div>
</div>

Compact Toasts

Smaller toasts for brief notifications

File uploaded

Copied to clipboard

Action completed

HTML

<!-- Simple Compact Toast -->
<div class="bg-white rounded-lg shadow-lg border border-gray-200 px-3 py-2">
  <p class="text-sm text-gray-900">File uploaded</p>
</div>

<!-- With Icon -->
<div class="bg-white rounded-lg shadow-lg border border-gray-200 px-3 py-2 flex items-center">
  <svg class="h-4 w-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">...</svg>
  <p class="text-sm text-gray-900">Copied to clipboard</p>
</div>