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.

Examples

Make sure to call the useToast hook on component level below the <ToastProvider>. This is necessary in order for the Toast to work.

Tone of voice

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

ReferenceError: Box is not defined

Dismissible

Display a button to allow dismissing the toast when clicked.

Action

Display a button allowing the toast to have an action.

Action + Dismissible

Usage

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

const [SystemProvider] = createSystem()

// You must always add the ToastProvider in the root of your application
function Root() {
  return (
    <SystemProvider>
      <ToastProvider>
        {...}
      </ToastProvider>
    </SystemProvider>
  )
}

function Example() {
  const showToast = useToast()

  return (
    <Button
      onClick={() =>
        showToast({
          message: 'This is the admin-ui toast!',
        })
      }
    >
      Show Toast
    </Button>
  )
}

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.	✅	-
tone	critical, info, warning, positive	The toast's tone of voice.	🚫	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

• Examples
  • Tone of voice
  • Dismissible
  • Action
  • Action + Dismissible