Toast

Brief, non-blocking message about the result of an action. Render ToastRegion once and call toast().

Feedbackv0.1.0experimentalWCAG 2.2 AAView spec

import { Button, toast } from "@rdloom/react";

export default function ToastSuccessExample() {
  return (
    <Button onPress={() => toast({ title: "Changes saved", variant: "success" })}>Save</Button>
  );
}

Installation

CLI

Manual

npm

pnpm

yarn

bun

npx rdloom add toast

Copies the source into src/components/rdloom. Edit it freely: rdloom upgrade merges later versions into your changes. It needs react-aria-components; add --install to install them.

Use another registry client

npx shadcn@latest add https://rdloom.vimalbhatt.com/r/toast.json

Works, but without upgrade tracking.

Usage

import { Button, toast } from "@rdloom/react";

<Button onPress={() => toast({ title: "Changes saved", variant: "success" })}>Save</Button>

Danger

import { Button, toast } from "@rdloom/react";

export default function ToastDangerExample() {
  return (
    <Button
      variant="secondary"
      onPress={() => toast({ title: "Upload failed", description: "Check your connection and try again.", variant: "danger" })}
    >
      Upload
    </Button>
  );
}

Persistent

import { Button, toast } from "@rdloom/react";

export default function ToastPersistentExample() {
  return (
    <Button
      variant="secondary"
      // timeout 0 keeps it until the user closes it.
      onPress={() => toast({ title: "New version available", description: "Reload to update.", timeout: 0 })}
    >
      Check for updates
    </Button>
  );
}

API Reference

Defined by the spec. Components also accept the props of the React Aria component they wrap.

Prop	Type	Default
`title`required Main message.	`string`	none
`description` Optional extra detail.	`string`	none
`variant` Tone of the message.	`"neutral" \| "success" \| "danger"`	`"neutral"`
`timeout` Auto-dismiss after this many ms (10 seconds by default). 0 keeps it open until the person closes it. Timers pause while the pointer is over the toast or it has keyboard focus, so nobody loses a message they are reading.	`number`	`10000`

Accessibility

Role alertdialog, WCAG 2.2 AA. Tested with axe and keyboard tests; screen reader checks are in the audit checklist.

Keyboard

F6 moves focus to the toast region
Tab reaches the close button
Esc dismisses the focused toast

Screen readers announce

A new toast is announced without moving focus
F6 moves into the notifications region; the toast's title and description are read
The dismiss button is announced as Dismiss
A focused toast does not disappear while you read it

What your code must do

New toasts are announced by screen readers
Auto-dismiss pauses on hover and focus
Messages with actions should not auto-dismiss

Guidelines

Use it when

Confirming a completed action, like 'Saved'
Reporting a background failure

Avoid it when

Errors the user must fix in a form: show them inline
Critical decisions: use Dialog

Don't

Several toasts at once for one action
Important info that disappears too fast

Design tokens

The semantic tokens this component uses. Change them once and every component follows; see Design tokens.

--rd-color-surface-raised
--rd-color-border-default
--rd-color-text-default
--rd-color-text-muted
--rd-color-feedback-success
--rd-color-feedback-danger
--rd-color-focus-ring
--rd-radius-overlay