• Alert For in-flow messaging.
  • Notice For lighter in-flow messaging.
The showToast function used in these examples is automatically available in Playroom.
To get access to the showToast function in your application code, call the useToast Hook.
import { useToast } from "braid-design-system"

export default () => {
  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 and critical 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.
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.