Toast
EuiToast allows for small notes that appear in the bottom right of the screen. They should be used for ephemeral, live actions (think save complete or something just finished right now).
They should not be used for historical actions (your report built 30 minutes ago). This means that a user should never be greeted with toasts when starting a session. Toasts should be brief and avoid long paragraphs of text or titling.
Component
Usage
Toast list
Info
For informative messages use
type="info".
Success
For success messages use color="success".
Warning
Use this callout to warn the user against decisions they might regret. Show a warning message when the program detects that something is not behaving right, but it didn't cause any termination. For warning messages use color="warning".
Danger
Use this callout to let the user know that something went wrong. For example if you want to communicate an error. You should show an error message when the issue is terminal, this doesn't always mean that the operation stops completely, but the task is not complete. For errors messages use color="danger".
Guidelines
This page documents patterns for using toasts, short messages that appears on the lower right corner and time out after a few seconds. They are a popular design choice because they don't need to fit in a layout and don't disrupt the user.
A new notification appears
Success toasts indicate that everything worked out.
They are the most-commonly used toasts.
A new notification appears
Warning toasts direct user attention to a potential problem.
You should receive a warning message when the program detects that something is not behaving right, but it didn't cause any termination.
A new notification appears
Error toasts report a problem.
You should receive an error message when the issue is terminal, this doesn't always mean that the operation stops completely, but the task is not complete.
A new notification appears
Info toasts relay neutral information.
The default toast, an info toast might notify users about an ongoing action.
Use a toast for a timely message
Toasts are appropriate for short feedback related to a user action. A toast should contain a message about a current action, not a historical action.
A new notification appears
Do: Use a toast for a brief message about the current action.
A new notification appears
Don't: Greet users with a toast when they open a page.
Most often, it's a single line of text
By default, a toast stays on the screen 10 seconds. Users should be able read the message in 6 to 7 seconds. The message should get straight to the point and rarely include more than one line.
A new notification appears
Do: A single line of text is readable at a glance.
A new notification appears
- Username is a required field.
- Password must be at least 6 characters long.
- Email is a required field.
Don't: Cram a lot of detail into a toast. These errors should persist in callouts and validations on the form. They don't need to be spelled out in the toast.
Toasts should only contain a single action
A toast can have a single action, styled as a standard button. If more actions are needed, or if the action is important enough to interrupt the user, use a modal instead.
A new notification appears
Do: Use only one action per toast and favor a one-word label. Align actions to the right, which follows our button guidelines for usage within restricted width containers.
A new notification appears
Don't: Use multiple actions. Don't align buttons in toasts to the left. This message is better in a confirmation modal.
Icons should emphasize actions
An icon on the left of the message can help define the message type.
A new notification appears
A new notification appears
Do: The check icon reinforces that the action succeeded. The error icon helps users understand the message is an error.
A new notification appears
Don't: Use icons that are hard to understand. They distract from the message.
Display one toast at a time
Users should be able to take in all the details from one toast before the next one arrives.
A new notification appears
Do: Display one toast at a time.
A new notification appears
A new notification appears
Don't: Stack toasts.
Keep messages as short as possible
For common actions such as create, add, delete, remove, and save, include the object type, the object name if available, and the past tense of the action.
A new notification appears
Do: Include the object name if it's not too long. Use single quotation marks around the object name if it helps clarify meaning.
A new notification appears
Don't: Use the generic "Your object."
Don't include the word "successfully." It's implied.
A new notification appears
Do: Use this format for a success message.
A new notification appears
Don't: Include "successfully."
For a message about multiple objects, include the object count, but not the names of the objects.
A new notification appears
Do: Include the object count.
A new notification appears
Don't: Overwhelm the user by listing the names of all the objects.
Use call-to-action buttons when the content needs more room
Occasionally, the content of a toast is too involved to fit into the constrained space of a toast. This is common in long error messages. In these cases use the toast to deliver the summary of the information and use a button to provide a call-to-action for the full message.
A new notification appears
The maximum bucket size of 200 was exceeded.
Do: Use the toast message to provide a summary and a button to link to the full content.
A new notification appears
The maximum bucket size of 200 was exceeded
An extremely long error trace.
Don't: Cram a lot of content into the small space of a toast.
Props
EuiToast
Prop | Description and type | Default value |
|---|---|---|
Prop title# | Description and type Type: ReactNode | Default value |
Prop color# | Description and type Type: "primary" | "success" | "warning" | "danger" | Default value |
Prop iconType# | Description and type Type: IconType | Default value |
Prop onClose# | Description and type Type: () => void | Default value |
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Type: string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
EuiGlobalToastList
Prop | Description and type | Default value |
|---|---|---|
Prop dismissToast# | Description and type Type: (toast: Toast) => void | Default value Required |
Prop toastLifeTimeMs# | Description and type Type: number | Default value Required |
Prop toasts# | Description and type Type: Toast[] | Default value [] |
Prop side# | Description and type Determines which side of the browser window the toasts should appear ToastSide | Default value right |
Prop showClearAllButtonAt# | Description and type At this threshold, a "Clear all" button will display at the bottom of the toast list Defaults to number | Default value 3 |
Prop onClearAllToasts# | Description and type Optional callback that fires when a user clicks the "Clear all" button. () => void | Default value |
Prop role# | Description and type Defaults to the log role. The alert role AriaRole | Default value log |
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Type: string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
EuiGlobalToastListItem
Prop | Description and type | Default value |
|---|---|---|
Prop isDismissed# | Description and type Type: boolean | Default value |
Prop children# | Description and type ReactElement to render as this component's content ReactElement<any, string | JSXElementConstructor<any>> | Default value |
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Type: string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |