Feedback

Toast

Non-blocking notification messages that appear in response to a user action. They should be brief and not interrupt the user flow.

V 1.0View in Storybook
Controls
Type
Message
Show Button
Button Label
Show Cross

Variants

TypeThe leading options available for Accordion
Type = information
Type = sucess
Type = error
Type = warning
Action and dismiss buttonsThe leading options available for Accordion
action = Yes; dismiss = Yes
action = Yes; dismiss = No
action = No; dismiss = Yes
action = No; dismiss = No
All TypesAll five toast types stacked

Props

Name
Type
Default
type*
string
Neutral
showButton
boolean
true
showCross
boolean
true

Code

import { Toast } from '@/src/components/Toast/Toast'

<Toast
  type="success"
  message="Item added to your cart"
  showButton={true}
  buttonLabel="View Cart"
  showCross={true}
  onDismiss={() => setVisible(false)}
/>