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.

Set yourself free.

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.

Item moved successfully.

Item has been deleted.

Improve password difficulty.

Gray

Yellow

Blue

Indigo

Purple

Customize your colors.

Simple toast

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

Message sent successfully.

Icons

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

There is a box icon.

No icon at all.

Autohide example

Autohide in 6s.

Transitions

You can use one of Svelte/easing.

Transition type: slide

Transition type: slide, delay: 250, duration: 300, easing: quintOut

Transition type: slide, delay: 250, duration: 2000, easing: elasticOut

Blur examples

Transition type: blur, amount: 10

Transition type: blur, amount: 50, delay 1000

Fly examples

Transition type: fly right

Transition type: fly down

Undo button

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

Conversation archived. Undo

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.

Jese Leos

Hi Neil, thanks for sharing your thoughts regarding Flowbite.

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.

New notification

Bonnie Green

commented on your photo

a few seconds ago

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.

Update available

A new software version is available for download.

Positioning

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

Top left positioning.

Top right positioning.

Bottom left positioning.

Bottom right positioning.