• Alert For in-flow messaging.
  • Notice For lighter in-flow messaging.
The showToast function used in these examples is automatically available in Playroom. You do not need to call the useToast function.
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>
)
Toasts support positive, critical and neutral tones.
If you need to provide more context to the user, you can also provide a description.
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.
When an action is provided in addition to a description, the layout will stack vertically to better accommodate all the content.
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.
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.