Toast

Supports 5 colors and 6 different regions to display toasts

Supports custom layout of the toast children

Correctly handles focus for keyboard and screen readers users

Controlled with a React hook and lets you hide the toast programmatically

Similar components:
Alert
Dismissible
Card


Usage

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.

Options

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.

Composition

Depending on the content and custom elements you pass to the toast, you can change its layout with the size property.

  • small size renders the title, text, and actions on the same line. Small size is an excellent option for short notification messages and is used by default.
  • medium size renders the title above the text while keeping actions on the end side of the toast. Medium size works great for detailed notifications where you have more text content and use startSlot with custom elements.
  • large size renders the title, text, and actions as a vertical stack of elements. Large size is great to use when building custom layouts for promotion banners.

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.

Accessibility

  • Toast automatically announces its text content for screen readers and manages the focus by adding the focusable toast elements right after the currently focused element in the focus queue.
  • When using toasts without a timeout, provide a close button. If this button doesn't have a text label, add an aria-label for screen readers.

Properties

useToast interface:

Toast properties:

Name
Type
color
enum
icon
React.ComponentType
title
string
text
string
children
React.ReactNode
actionsSlot
React.ReactNode
startSlot
React.ReactNode
timeout
enum
position
enum
size
enum
attributes
object
Previous