Toast

The toast is used to show alerts on top of an overlay. The toast will close itself when the dismiss button is clicked, or after a timeout. The toast component is used to give feedback to users after an action has taken place.

Usage

To show toasts you must call the useToast hook.

import { useToast } from '@vtex/admin-ui'

function YourComponent() {
  const showToast = useToast()

  showToast({
    message: '...',
  })

  // ...
}

The hook consumes a context provided by the ToastProvider. You must wrap the app root by the provider, it show below your ThemeProvider.

// App root file
import { ToastProvider, ThemeProvider } from '@vtex/admin-ui'

function Root() {
  return (
    <ThemeProvider>
      <ToastProvider>
        {...}
      </ToastProvider>
    </ThemeProvider>
  )
}

Examples

Variants

The toast's variant is either info (default), critical, warning, or positive, and is adjustable using the variant prop.

Loading...

Non-dismissable

Toasts are dismissable by default. The dismissable prop controls this behavior.

Loading...

Action

Display a button allowing the toast to have an action.

Loading...

Replacing toasts

You can assing a key to your toasts. Only a single toast with the given id is visible at once. Use it to reduce the number of toast on your app.

Loading...

Props

Because the way of rendering a Toast on admin-ui is by calling the function returned by the useToast hook, these are the properties that you can pass to the function returned params.

Name	Type	Description	Required	Default
message	ReactNode	Message displayed to the end-user.	✅	-
variant	critical, info, warning, positive	Toast's variant.	🚫	info
duration	number	How long the toast should be apparent, in milliseconds.	🚫	10000
dismissible	boolean	Whether the toast can be dismissed or not.	🚫	false
action	{ label: string, onClick: () => void }	Toast's actions' props.	🚫	undefined
key	string	Toast's key.	🚫	undefined

Do’s

1. Conceptually, a toast is a type of alert, that gives users instant feedback about the tasks they just did. Its main objective is to ensure tasks confirmation and success.
2. Keep copies short and straight-forward. A single sentence should be enough.
3. Toasts shouldn’t be used only for neutral or positive feedback. System errors also apply.
4. Follow the semantics used by icons as described below.
5. Follow the same lead of Alerts to determine the type.
6. Animation should pop from the bottom of the screen and rest on the lower right-hand corner.

👉 For UX Writing guidelines, access https://uxwriting.vtex.com