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
useToasthook 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.
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({ key: 'app-name' })
// 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
- 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.
- Keep copies short and straight-forward. A single sentence should be enough.
- Toasts shouldn’t be used only for neutral or positive feedback. System errors also apply.
- Follow the semantics used by icons as described below.
- Follow the same lead of Alerts to determine the type.
- 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