display contract

Toast

Transient feedback message. Slides in from the bottom-right (desktop) or top (mobile).

Variants

  • default
  • success
  • destructive
  • with-action

Sizes

  • md
  • lg

Slots

  • icon
  • message
  • action

Example

toast.success('Project created', { action: { label: 'Open', onClick: open } })

Usage rule

Default duration: 5s for info/success, 8s with action, sticky for destructive.

The full Toast contract has 4 more rules, plus the do-not patterns. Get the full recipe.

Get the Toast contract in your project.