Toast

InstallationCopy Anchor Link

UsageCopy Anchor Link

import { Button } from "@/components/ui/button";
import { Toaster, toast } from "@/components/ui/toast";

// Once, at the root of the app (for example in layout.tsx).
export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      <Toaster closeLabel="Close" regionLabel="Notifications" />
    </>
  );
}

export function SubmitButton() {
  return (
    <Button
      onClick={() =>
        toast.add({
          type: "success",
          title: "Request submitted",
          description: "Your reference number is 24810.",
        })
      }
    >
      Submit
    </Button>
  );
}

Use a Toast to confirm something that just happened and needs no reply: a request was sent, a draft was saved. Do not use it for an error that blocks the person (show it next to the field, or in an Inline Alert), or for anything they must act on before it disappears. Mount one Toaster at the root and call toast.add({ title, description, type }) from anywhere, even outside React. type is neutral, info, success, warning or error. A toast goes after 6 seconds; pass timeout: 0 for one that stays until it is closed, and use that for errors people need to read. Keep the message to one short sentence; an actionProps button gives one quick action (such as Undo).

AnatomyCopy Anchor Link

• Toaster (role="region", a live region): the list at the bottom end of the screen. It holds up to 3 toasts.
• Toast: 484px wide (full width on phones), radius-md, shadow-3xl, on background-notification-white.
• Bar: 8px on the start side, in the kind's 400 colour.
• Icon, title, description, an optional action and a close button.

ExamplesCopy Anchor Link

KindsCopy Anchor Link

Press a button to add a toast. error and warning are announced at once (priority: "high"), the others politely. Success here has an action.

Timeout, priority and actionsCopy Anchor Link

A toast closes by itself after six seconds. Pass timeout: 0 to toast.add to keep it until the person closes it, and actionProps to add a button. Warnings and errors use priority: "high", so a screen reader announces them at once; the others wait their turn. Only three toasts show at once (limit on Toaster), and the rest queue behind them.

RTLCopy Anchor Link

Toasts appear at the bottom end of the screen: the bottom right in English and the bottom left in Arabic. The bar is on the start side, and a swipe toward the edge they came from dismisses them.

AccessibilityCopy Anchor Link

• Built on Base UI Toast. The viewport is a live region: new toasts are announced without moving focus (polite, or assertive for priority: "high"). Announce short, complete sentences.
• A toast does not go while the pointer is over it or focus is inside it, and the timer restarts after (WCAG 2.2.1). Use timeout: 0 for anything people may need more time to read.
• The kind is shown by an icon and the title as well as the bar, never by colour alone. Text is 4.5:1 and icons 3:1 or better, in light and dark. The close button has an accessible name (closeLabel).
• With reduced motion a toast appears and goes without sliding.

API ReferenceCopy Anchor Link

Deviations from DGACopy Anchor Link

• The neutral bar is border-neutral-primary: DGA draws it white, which is invisible on the white card. The bar is logical (the start side).
• DGA specifies no timing or announcement. Toasts pause while hovered or focused, can be swiped away, are announced, and the Toaster sits on the bottom end of the screen.

ContrastCopy Anchor Link