Toast | Arcadia Design

Try it: toasts open bottom-right

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

<Button
  variant="outline"
  onClick={() => toast({ title: "Link copied", tone: "success" })}
>
  Success
</Button>
<Button
  variant="outline"
  onClick={() => toast({ title: "Upload finished", description: "ding.mp3, 12 KB" })}
>
  Info
</Button>
<Button
  variant="outline"
  onClick={() => toast({
    title: "Couldn't delete the chat",
    description: "500: internal error",
    tone: "error",
    action: { label: "Retry", onClick: () => toast({ title: "Deleted", tone: "success" }) },
  })}
>
  Error with action
</Button>

TSX

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.

Examples

Tones

Rendered in place through separate stores (createToastStore): a warning and an error.

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

Knob	Takes	Default	Sets
	`Ref<Measure>`	`360px`	Width of the stack (360), capped by the viewport less the insets.
	`Ref<Space>`	`var(--space-4)`	Distance from the viewport's bottom-right corner.

Usage

Examples

Tones

Customising

Accessibility

API reference

Toaster

toast()6 props