Supports 5 colors and 6 different regions to display toasts
Correctly handles focus for keyboard and screen readers users
Controlled with a React hook and lets you hide the toast programmatically
You can display toast on the screen using the useToast hook, which returns a toast object with two methods: show and hide.
Calling show will render a toast based on the properties you pass to the method. It will hide automatically after a predefined timeout. For example, you can display a toast with an icon, title, text and 1-2 actions in an actionsSlot.
As a result of the show method call, you get an id that you can use later to call the hide method.
In the following example, we show a Toast on button click and hide it when an undo button is clicked inside the toast.
Toast supports 5 colors based on the color tokens available in the system. By default, it uses an inverted color which means it's rendered with dark background in light mode and a light background in dark mode. Additionally, color can be set to neutral, primary, positive, and critical to highlight the status of the performed action.
By default, all toasts are shown in the bottom-end region of the screen. When calling show method, you can pass one of the other available positions.
You can customize the timeout option for toasts with more content. By default, it comes with the short value, which is 4s. You can change it to long or a custom ms value. Passing 0 timeout disables the auto-dismissing of the toast.
Toasts support global options per screen region passed through the Reshaped provider. For every region, you can define the area's width and disable the stacking behavior.
Depending on the content and custom elements you pass to the toast, you can change its layout with the size property.
actionsSlot can be used with any actionable elements, but if you're using it with the Button component, Toast will provide reasonable defaults for their style properties. When used for displaying multiple actions, you can pass them as an array instead of using a React.Fragment
Instead of displaying an icon, you can display a custom element using a startSlot property. It's only displayed if the icon is not passed.
Instead of using the default toast layout, you can render a custom React layout inside the toast container. This approach can be used when you need to build promotion banners, cookie notices, and other layouts.