Getting started

InstallUsageGuidelinesContributeRelease

Foundation

Navigation

Feedback

AlertBadgeDestination BadgeDestination Badge GroupEmpty StateLabel BadgeLabel Badge GroupPillProgress BarSkeletonSpinnerStatsStatus BadgeStatus IndicatorTagToast

Toast

Toasts display brief and temporary notifications without interrupting user's experience.

#

#

#

#

#

#

#

Toasts can include an optional action button below the message. Use it to offer a way to resolve a problem or suggestion that toast is about.

#

Message can be skipped for toasts that don't require detailed explanation.

If toast without a message has an action, it's displayed on the same row as toast title.

#

#

  • When notifying user about their action that was performed on the same page.
  • When toast doesn't contain important information that user has to see.
  • When dismissing a toast or not paying attention to it doesn't have negative consequences to user experience.

#

  • If you inform user about important issues, use an alert instead.
  • If you notify user about the result of their action taken on a different page than the current one.
  • If you need to display errors related to a form, use an alert or an invalid form field.

#

  • Use sentence case.
  • When there's a message in a toast, keep title to 3 words max.

#

#

This React hook returns an object with the following properties.

#

#

Type: ToastOptions

Toast options.

#

Type: string

Unique identifier for a toast to make sure only one is displayed at a time.

#

Type: string

Short summary of what happened.

#

Type: string

Extended description of what happened.

#

Type: "info" | "warning" | "error" | "success"

Determines the appearance of the toast, depending on the intent.

#

Type: string

If present, show an action button with this text.

#

Type: () => void

Callback for when action button is clicked.

#

#

Type: string

Close a toast by its ID. ID is a string you provided in a id property when creating a toast.

#

Close all toasts.

On this page

  • Example
  • Usage
  • Information
  • Success
  • Warning
  • Error
  • Actionable
  • Minimal
  • Guidelines
  • When to use it
  • When not to use it
  • Content
  • API
  • useToast()