Getting started
Foundation
Typography
Navigation
Feedback
Forms
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.
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.