1. Components
  2. Toasts

Components

Tailwind CSS Toasts

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

Basic usage

Example

A basic form of the toasts.

Condensed

Vertically stacking multiple toasts in a readable manner.

Color variants

Solid color variants

The default form of solid color toasts.

Soft color variants

The default form of soft color toasts.

Message with loading indicator

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

With actions

Add additional controls and components to toasts.

Stack

Vertically stacking multiple toasts in a readable manner.

Placement

Display a notification message at any place of the viewport.

Dismiss button

Requires JS

Note that this component requires the use of our Remove Element plugin, else you can skip this message if you are already using Preline UI as a package.

Use dismiss-alert to dismiss a content.