Toast

Be sure to read the full

Toast list

Default

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.

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".

Props

EuiToast

Extends HTMLAttributes


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 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 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

Toast list.css-1pgbpvp{-webkit-margin-start:8px;margin-inline-start:8px;opacity:0;}.css-1pgbpvp:focus,.heading:hover .css-1pgbpvp{opacity:1;}