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

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