BRAID
Braid Logo
 

useToast

Open in Playroom

Alternatives

  • Alert — For in-flow messaging.
  • Notice — For lighter in-flow messaging.

Accessibility

Follows the WAI-ARIA Alert Pattern.

Playroom prototyping

The showToast function used in these examples is automatically available in Playroom. You do not need to call the useToast function.

Development considerations

To get access to the showToast function in your application code, call the useToast Hook.
import { useToast } from 'braid-design-system';

export const Demo = () => {
  const showToast = useToast();

  // etc...
}
To enable this Hook, wrap your app in a ToastProvider—typically where you render BraidProvider.
import { BraidProvider, ToastProvider } from 'braid-design-system';

export const App = () => (
  <BraidProvider>
    <ToastProvider>
      {/* App code... */}
    </ToastProvider>
  </BraidProvider>
)

Tones

Toasts support positive, critical and neutral tones.
Open in Playroom

Descriptions

If you need to provide more context to the user, you can also provide a description.
Open in Playroom

Actions

You can allow users to perform a single associated action via the action prop. When the action is performed, the toast is automatically removed from the screen.
Open in Playroom
When an action is provided in addition to a description, the layout will stack vertically to better accommodate all the content.
Open in Playroom

Dismissing messages

A toast message can be dismissed via the close button or automatically after 10 seconds.Translation hint The aria-label for the close button can be customised by providing a closeLabel prop.
Open in Playroom

Deduping

You can assign a key to each toast which is used to guarantee that only a single toast with a given key is visible at once. This is particularly useful for reducing visual noise when your application has the potential to generate a lot of toasts.
Open in Playroom