Skip to main content
Elastic UI
Elastic UI
DocumentationPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Introduction
  • Guidelines
    • Getting started
    • Testing
  • Components
    • Templates
      • Super date picker
    • Layout
      • Accordion
      • Bottom bar
      • Flex
      • Flyout
      • Header
      • Horizontal rule
      • Modal
      • Page header
      • Panel
      • Popover
      • Resizable container
      • Spacer
    • Navigation
      • Breadcrumbs
      • Button
      • Collapsible nav
      • combo_box
      • Context menu
      • Facet
      • Key pad menu
      • Link
      • Pagination
      • Side nav
      • Steps
      • Tabs
      • Tree view
    • Display
      • Aspect ratio
      • Avatar
      • Badge
      • Callout
      • Card
      • Comment list
      • Description list
      • Drag and drop
      • Empty prompt
      • Health
      • Image
      • List group
      • Loading
      • Progress
      • Skeleton
      • Stat
      • Text
      • Timeline
      • Title
      • Toast
      • Tooltip
      • Tour
    • Forms
      • Form controls
      • Selection controls
      • Form layouts
      • Compressed forms
      • Form validation
      • Auto refresh
      • Color selection
      • Combo box
      • Date picker
      • Expression
      • Filter group
      • Inline edit
      • Range sliders
      • Search bar
      • Selectable
      • Super select
  • content
  • data_visualization
  • EUI Docgen output demo
  • patterns
  • EUI
  • Components
  • Display
  • Toast

Toast

Be sure to read the full toast usage guidelines.

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

Edit this page
Previous
Testing
Next
Tooltip
  • Toast list
  • Default
  • Info
  • Success
  • Warning
  • Danger
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic