Toast
The Toast component provides a way to show live, time-sensitive feedback to
users, which includes updates or changes to the system status. To display the
Toast component use the ToastContainer along with the showToast function.
The function accepts ToastOptions as an argument, allowing you to pass various
configurations, and returns the corresponding toast id.
Use toasts for displaying short-lived notifications or messages to the user.
ToastOptions
, | Name | Type | Default | Description |
|---|---|---|---|
id? | | | - | A unique id for the toast. Using this toast id consumer can control the behavior of individual toast notifications. Toast messages with same id will only be shown once. |
title | - | Title displayed in the toast notification. | |
type? | | | | | 'info' | Type of the notification. Also indicates the color and icon. |
message? | | . | - | Message displayed in the toast notification. |
lifespan? | | | info and success: 8000, critical and warning: 'infinite' | The Toast notification will automatically close after a certain period of time given in milliseconds. If 'infinite' is provided, the consumer will need to manually close the toast. |
actions? | . | - | Optional actions passed to the toast element, appended on the bottom left. Should only be used to either add a Button or a Link. |
role? | | | | info, success and warning: 'status', critical: 'alert' | Live region roles |
position? | 'bottom-left' | Position of toast |