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. Check icon
Item moved successfully.
Error icon
Item has been deleted.
Warning icon
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 agoInteractive 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.