Design System

Visual Style

Components

Patterns

Guides

Resources

Toast

Temporarily displayed messages that provide additional information or feedback about a user's action or event. Hovering over a message will keep it in view.

<Toast triggered={triggered} onHide={onHideHandler}>
            Saved
          </Toast>

Use when

  • There are low priority messages to display in response to some event or action — i.e. messages that are helpful, although not intrinsic to the experience
  • The information contained is very concise and easy to read and understand within seconds
  • The message is less than 2 lines long or 150 characters

Don't use when

  • The information contained is vital to completing a task
  • The message is too long to read and understood within seconds (> 150 characters)

Props

All props availble on the Alert component are available in addition to the options below.

NameTypeDefaultDescription

triggered

boolean

false

Whether to display to the tooltip or not

onShow

function

callback that is called when the tooltip is shown

onHidden

function

callback that is called when the tooltip is hidden

Related components

Resources

  • View in Storybook