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!

Repository

A link to the repo where the component lives.

Open link

Code Sandbox

Open page

gux-toast

Properties

Property	Attribute	Description	Type	Default
toastType	toast-type		"action" \| "error" \| "info" \| "success" \| "warning"	'success'

Events

Event	Description	Type
guxdismiss		CustomEvent<void>

Slots

Slot	Description
"icon"	Required slot for toast type of action
"link"	Optional slot for a link in any toast except toast type of action
"message"	Required slot for the toast message
"primary-button"	Required slot for primary action button in an action toast
"secondary-button"	Optional slot for secondary action button in an action toast
"title"	Optional slot for the toast title

Dependencies

Depends on

Graph


                                                
                                                graph TD;
                                                  gux-toast --> gux-icon
                                                  gux-toast --> gux-link-beta
                                                  gux-toast --> gux-cta-group
                                                  gux-toast --> gux-button-slot
                                                  gux-toast --> gux-truncate
                                                  gux-toast --> gux-dismiss-button
                                                  gux-truncate --> gux-tooltip
                                                  gux-dismiss-button --> gux-button-slot
                                                  gux-dismiss-button --> gux-icon
                                                  style gux-toast fill:#f9f,stroke:#333,stroke-width:4px

Toasts

Component checklist