Toast

import { Button, toast } from "@arcadia/ui";

<Button onClick={() => toast({ title: "Link copied", tone: "success" })}>
  Copy link
</Button>

For outcomes nothing else on screen shows: an API error, an upload result, a failed change. Never a duplicate of something already visible. Mount one <Toaster/> near the app root; at most three show, stacked bottom-right with the newest nearest the corner.

Timeouts are 5s, 8s for errors, and none while an action is offered, so nobody has to race a toast to press Retry. Hovering or focusing the stack pauses it. The action sits under the text, or at the end of a title's row while the title keeps at least half of it, so a long label never squeezes the message.

rootStyle on Toaster takes where the stack sits, its width and its distance from the corner.

--toast-w

Ref<Measure>Default 360px

Width of the stack (360), capped by the viewport less the insets.

--toast-inset

Ref<Space>Default var(--space-4)

Distance from the viewport's bottom-right corner.

Errors are announced assertively and everything else politely, from a labelled region. Every toast has a labelled dismiss button, and swiping right dismisses it on touch. An action in a toast must also be reachable elsewhere, because a toast can time out or be missed.

F6

Moves focus into the toast region

Esc

Dismisses the focused toast