useToast

The Toast component is a good way to communicate out of flow messages, and optionally provide some helpful actions to respond with. However, as these actions can NOT be communicated to a screen reader, they should only ever be treated as a helpful enhancement of the experience. If the user should take a specific action as a result of a Toast being displayed, this should be communicated through the description property as well.

Setup

Unlike other Braid components, Toast is exposed via a hook and rendered automatically at the bottom of the viewport using a React portal. This is managed by the ToastProvider component. The useToast hook won't work unless it is nested within a ToastProvider. Most apps should just render this within their top level BraidProvider component.
Warning: Only a render a single ToastProvider, not one per useToast usage.
import { BraidProvider, ToastProvider } from "braid-design-system"

export const App = () => (
  <BraidProvider>
    <ToastProvider>
      <AppContent />
    </ToastProvider>
  </BraidProvider>
)

Usage

import { useToast } from "braid-design-system"

export const App = () => {
  const showToast = useToast()

  const onError = () => {
    showToast({
      tone: "critical",
      message: "Some error occured",
      description: "Longer description of error and how to resolve it",
      action: {
        label: "Retry",
        onClick: retryFn,
      },
    })
  }

  const onSuccess = () => {
    showToast({
      tone: "positive",
      message: "Message sent",
    })
  }

  return <YourComponent onError={onError} onSuccess={onSuccess} />
}

Positive Toast

Toast with no duplicates

Positive Toast with description

Critical Toast

Critical Toast with description

Further References