Flowbite Svelte: v0.46.14
Svelte: v5.0.0-next.179
SvelteKit: v2.5.18
Vite: v5.3.3

Toast

The toast component can be used to enhance your website’s interactivity by pushing notifications to your visitors. You can choose from multiple styles, colors, sizes, and positions and even dismiss the component.

Default toast

Use this simple toast component with an icon, message, and dismissable close button to show alert messages to your website visitors.

Colors

Use the `color` prop to easily change the colors of the icons. Set the `color` prop to `none` and use the `extraIconClass` prop to customize your desired icon styles. Usually, green, red, and orange are used to show success, danger, or warning alert messages to your users. See the first three examples below.

Simple toast

This component can be used to show simple messages and notifications without the use of a close button.

Icons

For the right positioning of the icon use: `slot="icon"`. You can use any [icon components](/icons).

Autohide example

Transitions

You can use one of Svelte/easing.

Blur examples

Fly examples

Undo button

Use this toast component to also show an “undo” button to reverse the action of the user.

Advanced examples

If the toast content grows to multiple lines we need to switch off the `items-center` alignment. Notice how the examples below achieve that by setting `align=flase` property.

Toast message

This component can be used to show messages and a CTA button when receiving chat messages, comment notifications, and other use cases.

Push notification

This component can be used to show notifications for an action from another user such as posting a comment, receiving a like, being tagged. You can show an avatar, icon, message, and the time of the notification.

Interactive toast

Use this interactive toast component to encourage users to make a certain action such as updating to the latest software version. You can set an icon, message, and two CTA buttons.

This is an example with the icon and extra content at the same time.

Positioning

Use the position property to position these toast components relative to the main content wrapper element from your document.