Toasts in horizontal apps appear at the top or bottom. In a vertical reading interface, the columns create visual corridors · a toast should appear outside the active reading column.

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 }) {
return (
  <div
    aria-live="polite"
    aria-atomic="true"
    style={{
      position: "fixed",
      // Top-center: above the reading area

Guidance

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?

PreviousApproval Card Next Skeleton

1	function 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