Overlays

Toast

Transient notifications.

Client component2 exports

Mount ToastProvider once near your application root, then call `toast()` from the `useToast()` hook anywhere below it. Radix supplies the live region, the swipe-to-dismiss gesture, and the F8 hotkey that moves focus into the viewport so keyboard users can reach an action before it disappears.

Import

import { ToastProvider, useToast } from "@abbainitiative/ui";

Also available from the subpath entry @abbainitiative/ui/toast.

This component carries its own "use client" directive. You can still render it from a Server Component — you simply cannot pass it a function prop, because functions do not serialise across the boundary.

Examples

Publishing a toast

Press F8 while one is visible to move focus into the notification.

// Mount once, near the application root:
<ToastProvider>{children}</ToastProvider>

// Then anywhere below it:
const { toast } = useToast();

toast({
  title: "Changes saved",
  description: "Your profile is up to date.",
  tone: "success",
  action: { label: "Undo", onClick: revert },
});

Props

Toast props. All native attributes of the underlying element are also accepted and forwarded.
Prop	Type	Default	Description
duration	`number`	`5000`	Milliseconds before auto-dismiss. Set on ToastProvider.
title (required)	`ReactNode`		Short headline. Passed to toast().
description	`ReactNode`		Supporting detail. Passed to toast().
tone	`"info" \| "success" \| "warning" \| "danger"`	`"info"`	Semantic role. Passed to toast().
action	`{ label: string; onClick: () => void }`		An optional single action. Passed to toast().

Accessibility

Toasts publish into an ARIA live region, so they are announced without stealing focus.
F8 moves focus into the toast viewport to reach actions by keyboard.
Each toast has a labelled close button and can be swiped away.
Actions carry `altText` for when the toast is announced but cannot be reached in time.
`useToast` throws outside a provider rather than silently doing nothing.