Toast

A succinct message that is displayed temporarily using Sonner.

Installation

// Add Toaster to your layout
import { Toaster } from "@gradeui/ui"

// In your layout.tsx
<Toaster />

// Use toast function in components
import { toast } from "sonner"

Usage

Examples

Success

Error

Warning

Info

With Description

With Action

Promise Toast

Custom Duration

Dismiss Toast

Props (Toaster)

Prop	Type	Default	Description
position	"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"	"bottom-right"	The position of the toasts.
expand	boolean	false	Whether toasts should expand to fill available space.
richColors	boolean	false	Use rich colors for success, error, etc.
closeButton	boolean	false	Show a close button on each toast.
duration	number	4000	Default duration in milliseconds before toasts dismiss.

Accessibility

Uses ARIA live regions for screen reader announcements
Toasts can be dismissed with keyboard
Action buttons are keyboard accessible
Respects prefers-reduced-motion for animations

Sidecar

The Markdown sidecar Studio (and the Grade MCP server, when it ships) reads to understand this component — frontmatter, when- to-use guidance, and canonical examples. Authored once at packages/ui/components/ui/toast.md and shipped inside the published @gradeui/ui tarball.

---
name: Toaster
import: "@gradeui/ui"
aliases: [toast, toaster, sonner, notification, snackbar, alert toast, transient alert, transient banner, banner notification, toastandroid]
props:
  - Toaster: position? "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" (default "bottom-right")
  - Toaster: theme? "light" | "dark" | "system"
  - Toaster: richColors?: boolean — colored variants for success/error/warning/info
  - Toaster: expand?: boolean — keep multiple toasts visually separated rather than stacked
  - Toaster: visibleToasts?: number — max concurrent toasts on screen (default 3)
  - Toaster: duration?: number — default ms before auto-dismiss
when_to_use: Transient, non-blocking feedback that confirms or warns about an action — "Saved", "Failed to upload", "Copied to clipboard", "Invitation sent". For permanent inline messages reach for Callout. For confirmations that block until acknowledged use Dialog. Mount <Toaster /> ONCE at the root of the app; everywhere else, call the `toast` helper.
composes_with: [App root layout (single <Toaster /> mount), Form submit handlers (success/error toasts), Async actions]
notes: Backed by Sonner under the hood — `import { toast } from "sonner"` to fire toasts from anywhere.
---

```jsx
// At the app root, mount once.
<Toaster richColors position="bottom-right" />
```

```jsx
// Anywhere else, fire via the helper.
import { toast } from "sonner";

<Button
  onClick={async () => {
    try {
      await saveProfile();
      toast.success("Saved");
    } catch (err) {
      toast.error("Couldn't save", { description: err.message });
    }
  }}
>
  Save changes
</Button>
```

Popover

Tooltip