1. Components
  2. Toasts

Components

Tailwind CSS Toasts

Push notifications to your visitors with Tailwind CSS toast, a lightweight and easily customizable alert message. Add icons, progress bar, dismiss buttons and more.

Example

A basic form of the toasts.

Theme:

Condensed

Vertically stacking multiple toasts in a readable manner.

Theme:

Solid color variants

The default form of solid color toasts.

Theme:

Soft color variants

The default form of soft color toasts.

Theme:

Message with loading indicator

Display a global loading indicator, which is dismissed by itself asynchronously.

Theme:

With actions

Add additional controls and components to toasts.

Theme:

Stack

Vertically stacking multiple toasts in a readable manner.

Theme:

Avatar

You can also add additional elements, such as an avatar image.

Theme:

Progress

You can also add additional elements, such as an icon and a progress bar.

Theme:

Placement

Display a notification message at any place of the viewport.

Theme:

Dismiss button

Use dismiss-alert to dismiss a content.

Theme:

JavaScript Behavior

Requires Additional Installation

Note that this feature requires the use of the third-party Toastify plugin.

Use Toastify to create dynamic toasts.

Theme: