Toast

Confirms that something just happened, then gets out of the way.

Live React portWildToast.vueFeedback/ToastWToast

Try it

Close it with the cross, or turn on Auto-close and wait five seconds.

Threshold saved

Variant

Message

Closable

Auto-close

<WildToast
  variant="success"
  @close="hide"
>
  Threshold saved
</WildToast>

When to use

Use a toast to confirm something that just happened: a save, an export, a sent invite.
Use auto-close for messages nobody has to act on.

Don’t use it

For a condition that lasts, or an error someone must fix. Use Alert.
For a decision before an action runs. Use Confirm dialog.

Variants

Five tones. Pick the one that matches what happened. Use accent for information worth noticing, and neutral for routine confirmations.

Threshold saved

Could not save the threshold

Export finished with 2 sites skipped

Readings resume at the next check-in

Export queued

<WildToast variant="success">Threshold saved</WildToast>
<WildToast variant="error">Could not save the threshold</WildToast>

Closing

Toasts show a close cross by default. Turn it off only when the toast closes itself.

Threshold saved

Could not save the threshold for logger 4412 at Waikare Station

<WildToast variant="success" @close="hide">Threshold saved</WildToast>
<WildToast :closable="false" :auto-close="3000">Export queued</WildToast>

A long message wraps onto the next line, so none of it is cut off. The last toast closes itself after three seconds.

Content

Say what happened in a few words: “Threshold saved”.
Name the logger or site when it matters which one.
Use sentence case, with no full stop.
Keep it short enough to read at a glance.

Don’t use it

Auto-closing an error. People need time to read it.
Stacking more than three at once.

Accessibility

Error and warning toasts use role="alert", which interrupts a screen reader, and the others use role="status". Set role to override this. Auto-close pauses while the pointer is over the toast or focus is inside it.

Key	What it does
Tab	Moves focus to the cross, announced as “Close”.
Enter / Space	Closes the toast and moves focus to the next control.

Props

Prop	Type	Default	Description
variant	'success' \| 'error' \| 'warning' \| 'accent' \| 'neutral'	'neutral'	The tone. See Variants.
message	string	'Notification'	The text. The default slot replaces it.
closable	boolean	true	Shows the close cross.
autoClose	number	0	Closes after this many milliseconds. 0 never closes.
truncate	boolean	false	Keeps the message on one line, with an ellipsis.
role	'alert' \| 'status' \| 'none'	—	Live region. Defaults to alert for error and warning.
@close	() => void	—	Fires after the toast hides, on the cross or auto-close.

Tokens

Token	Value	Where it lands
--radius-field	10px	Corners.
(no token)	0 2px 8px rgba(0,0,0,.08)	Lift off the page.
--global-*-100	white for neutral	Ground.
--global-*-300	grey-500 for neutral	Border, 1.5px.
--global-*-800 / 900 / 1000	green, red: 800; squash: 900; blue, grey: 1000	Status icon.
--global-*-1000 / 1100 / 1300	green: 1000; red, squash, blue: 1100; grey: 1300	Message text.
--global-*-1000 / 1100	rest / hover	The cross.
--global-*-400 / 500	grey-600 / 700 for neutral	The cross’s hover and pressed circle.
--global-blue-1000	#1877F2	Focus ring on the cross.