Design System

Visual Style

Components

Patterns

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

onHide

function

callback that is called when the tooltip is dismissed or begins to fade out

onHidden

function

callback that is called when the tooltip has been completely hidden after the fade out animation is complete

showDuration

number

length of time in ms to display the Toast before hiding it

isCloseable

boolean

displays a close button in the Toast when true, and the Toast must then by manually dismissed by clicking the close button

Related components

Resources

  • View in Storybook