feedback

Toast

A brief notification that appears temporarily to confirm actions or report status.

Toasts close the feedback loop without interrupting the user's workflow. They are the right tool for action confirmations, background process updates, and non-critical alerts.

Anatomy

  • Icon
  • Message text
  • Optional action link
  • Dismiss button (×)
  • Progress bar (optional auto-dismiss indicator)

Variants

SuccessErrorWarningInfoLoading (indeterminate)

States

Entering (animation)VisibleExiting (animation)

Rules

✓ Do

  • •4-5 seconds auto-dismiss for success/info
  • •Persistent for errors (require manual dismiss)
  • •Include × dismiss button always
  • •Bottom-right or top-right positioning

✗ Don't

  • ×Don't auto-dismiss error toasts
  • ×Don't stack more than 3 simultaneously
  • ×Don't make the toast wider than 400px

AI Prompt

Paste into Claude, Cursor, Bolt, or v0.

Bottom-right toasts, 360px max-width, 14px padding, 8px radius. Success/info: 4s auto-dismiss. Errors: persistent. Slide-in from right, 200ms. role='status' (success) or role='alert' (errors). Always include × button.