Toast

Default toast

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

Colors

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

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

Icons

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

Autohide example

Transitions

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.

Events

You can use `onclose` to execute custom logic when the toast is closed.