Toast

Brief, self-dismissing notifications that pop up to confirm an action without interrupting the flow. Shown imperatively via ScToast.show(), which stacks toasts in a corner of the viewport.

Install

Examples

Status variants

Click a trigger — the toast appears in the top-end corner. default is a plain inverse surface; the other statuses add a leading Status Icon.

Default Info Negative Positive

Placement

One stack per placement — six corners are available.

Top start Top center Top end Bottom start Bottom center Bottom end

Duration

Each toast auto-dismisses after duration ms (default 4000); 0 keeps it until dismissed.

4s (default) Persistent (0) 1s

Guidelines

Usage

brief confirmations and feedback after an action (“Saved”, “Copied”). For persistent page-level messages, use a Banner; for inline contextual messages, an Alert.

Do

  • Keep the message to one short sentence — toasts disappear quickly.
  • Pair a destructive confirmation with an action link (e.g. “Undo”).
  • Use duration: 0 when the toast carries an action the user must take.
  • Pick one placement per app and stick with it.

Don’t

  • Don’t use a toast for critical errors that need acknowledgement — use a Modal or Banner.
  • Don’t put the only path to important content inside a toast — it auto-dismisses.
  • Don’t fire toasts for every minor state change; reserve them for the result of a user action.

Accessibility

Properties

Related