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

Colors

Each color variant displays a specific visual type toast and renders by default a corresponding icon.

Use primary for general information.
Use success to let the user know that something completed successfully. Show a success message when the program detects that something completed successfully.
Use warning 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.
Use danger 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.

If you need to use a custom icon, use the iconType prop to override it.

Actions

Use actionProps to add a primary and an optional secondary action. A standalone secondary action without a primary is not supported.

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

Your report is complete

Success toasts indicate that everything worked out.
They are the most-commonly used toasts.

A new notification appears

Node 726 is having trouble

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

Search failed. Check your Elasticsearch connection.

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

Please wait while your report is created

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

Your folder was moved

Do: Use a toast for a brief message about the current action.

A new notification appears

Haven't seen you in a while

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

Check your form for errors

Do: A single line of text is readable at a glance.

A new notification appears

Your form has errors

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 can have max. two actions

A toast should have a single action most of the time. If you need a secondary one, you can include it. If even more actions are needed, or if the action is important enough to interrupt the user, use a modal instead.

A new notification appears

Your report is complete

Do: Use only one action per toast and favor a one-word label.

A new notification appears

All messages will be deleted

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

Each color variant automatically displays a corresponding icon. Use iconType only when you need to override it with something more specific to the context.

A new notification appears

Your dashboard was updated

A new notification appears

A dashboard named 'MyDashboard' already exists

Do: The default icons communicate message type at a glance. Override with iconType only when a more specific icon adds clear meaning.

A new notification appears

Message sent

Don't: Override the icon with something unrelated or hard to understand. It distracts 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

3 new messages

Do: Display one toast at a time.

A new notification appears

There was a problem with your node

A new notification appears

3 new messages

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

User 'Casey Smith' was added

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

Your object has been saved

Don't: Use the generic "Your object."

Don't include the word "successfully." It's implied.

A new notification appears

Dashboard 'My_dashboard_with_a_very_long_name' was saved

Do: Use this format for a success message.

A new notification appears

Dashboard 'My_dashboard' was successfully saved

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

4 visualizations were deleted

Do: Include the object count.

A new notification appears

Visualization 1, Visualization 2, Visualization 3, and Visualization 4 were deleted

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

Your visualization has an error

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

Your visualization has an error

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

Extends HTMLAttributes


Prop	Description and type	Default value
Prop title#	Description and type Title of the toast. Should be used with text only. Do not pass complex content or custom components. Ensure to always pass a title. It's currently marked as optional for backwards compatibility. In a future major release, this will be required. Type: `ReactNode`	Default value
Prop text#	Description and type Main component text. Accepts text, text block elements such as `<p>`, and inline elements such as `<span>`, `<strong>`, `<em>` or `<EuiLink>`. Avoid passing complex layouts or custom components. Use `children` instead. Type: `ReactNode`	Default value
Prop children#	Description and type Can be used for additional, non-inline content. Use sparingly, as toasts are not meant to have complex content. Where possible, use `text` and `actionProps` instead to display text and actions. Type: `ReactNode`	Default value
Prop color#	Description and type Type: `"primary" \| "success" \| "warning" \| "danger"`	Default value `primary`
Prop iconType#	Description and type Defines a custom icon to be displayed. When no `iconType` is set, a default icon will be used based on the `color` of the toast. Type: `IconType`	Default value
Prop onClose#	Description and type Type: `() => void`	Default value
Prop animationMs#	Description and type Duration in milliseconds that drives a countdown animation on the toast's decor bar. When not set the bar is static at full width. Type: `number`	Default value
Prop actionProps#	Description and type Props for primary and secondary actions within the toast. Secondary actions will only be rendered in combination with a primary action. Type: `{ primary?: EuiToastActionPrimaryProps; secondary?: EuiToastActionSecondaryProps; }`	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 Type: `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 that allows users to dismiss all toasts in a single click. Defaults to `3`. Set to `0` to disable the button entirely. Type: `number`	Default value `3`
Prop onClearAllToasts#	Description and type Optional callback that fires when a user clicks the "Clear all" button. Type: `() => void`	Default value
Prop role#	Description and type Defaults to the log role. The alert role can be considered only if all toasts in this list will require immediate user attention. Several alerts at once, and unnecessary alerts, will a create bad screen reader user experience. Type: `AriaRole`	Default value `log`
Prop showNotificationBadge#	Description and type Renders a notification badge indicating the amount of toasts in the list. Type: `boolean`	Default value `false`
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 Type: `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