Toasts

Toasts display brief, temporary notifications. They're meant to be noticed without disrupting a user's experience or requiring an action to be taken.

Status

The status of the component

Ready for use!

Figma component

A link to the Figma library where the component lives.

Open in Figma

Due to how browsers process drop shadows, the component might look different in the images below.

Toast Component

Instance properties

Property	Values	Default
title Variant	true \| false	true
↪️ title Text	string	Title
↪️ text Text	string	Body copy
link Boolean	true \| false	true
variant Variant	success \| warning \| error \| information \| action	success
CTA Group Boolean	true \| false	true

Toast

title false variant action

Toast

title true variant warning

Toast

title true variant action

Toast

title true variant error

Toast

title false variant information

Toast

title false variant error

Toast

title true variant success

Toast

title false variant warning

Toast

title true variant information

Toast

title false variant success

Report it to the Design System team here!