ComponentsToast
Feedback

Toast

A brief, auto-dismissing notification that doesn't interrupt the reading experience.

Design question

Where does a transient notification appear in a vertical interface without interrupting reading flow?

Default

The toast slides and scales in from the top-right (leading) edge as a vertical pill, clear of the reading corridor so it never lands mid-column. It reads on the same axis as the content and auto-dismisses after 2s — sliding back out the way it came.

tsx
1function Toast({ message, visible }) {
2 return (
3 <div
4 aria-live="polite"
5 aria-atomic="true"
6 style={{
7 position: "fixed",
8 // Top-center: above the reading area

Guidance

Do
  • Position toasts at the top, above the reading area
  • Keep messages to one line — this is acknowledgement, not information
  • Auto-dismiss after 2 seconds, with a 300ms fade-out
Don't
  • Position toasts at the bottom of reading columns — they'll appear mid-sentence
  • Use toasts for errors — use an inline alert or dialog instead
  • Stack multiple toasts — replace with the latest

Accessibility

aria-live='polite', aria-atomic='true'. Not positioned based on visual layout — screenreaders announce regardless of position.

Open Question

In a full-screen vertical reader, is 'above the content' still the right position for toasts, or does it interrupt the reading start point?

← PreviousMessageNext →Skeleton