Toast
Toasts are used to show alerts on top of an overlay. The toast will close itself when the close button is clicked, or after a timeoutโthe default is 5 seconds. Toasts are usually used to give feedback to users after an action has taken place.
React
We can use the Toast component with the custom hook useToast
.
Position
By default the toast will be shown on the top right of the screen, but we can
change it by passing the position
prop.
Action
A toast can have a custom action button.
Color Scheme
A toast can either be 'light' or 'dark'.
Image
A toast can display an image.
Duration
By default the toast will be shown for 5 seconds, but we can change it by
passing the duration
prop.
States
A toast can be in a loading or error state.
On close complete
A function can run when the toast is closed.
Custom Content
To display custom content instead of the default description
message and
dismiss or action button, use the content
variant and pass the custom content
as the children
prop.
The content
variant will display an icon-based close button in the top right
of the toast container.
Toast Target
A toast can be rendered inside another component.