Primitive / Moleculebeta

Toast

Glassmorphic toast notifications powered by Sonner with success, error, warning, info, loading, promise, and action support.

@glinui/uiComponent: toast

Installation$

Package Manager$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add toast

Usage$

Add <Toaster /> once in your root layout, then call toast() from anywhere.

Setup$

TSX

1// app/layout.tsx
2import { Toaster } from "@glinui/ui"
3
4export default function RootLayout({ children }: { children: React.ReactNode }) {
5  return (
6    <html>
7      <body>
8        {children}
9        <Toaster variant="glass" closeButton />
10      </body>
11    </html>
12  )
13}

Basic$

TSX

1import { toast, Button } from "@glinui/ui"
2
3export function ToastBasicDemo() {
4return (
5  <Button onClick={() => toast("Settings saved", {
6    description: "Your workspace has been updated."
7  })} variant="glass">
8    Show toast
9  </Button>
10)
11}

Examples$

Toast Types$

Five semantic types with automatic icons and color-coded styling.

TSX

1import { toast, Button } from "@glinui/ui"
2
3export function ToastTypesDemo() {
4return (
5  <div className="flex flex-wrap gap-2">
6    <Button size="sm" variant="glass" onClick={() => toast.success("Saved", { description: "Changes applied." })}>Success</Button>
7    <Button size="sm" variant="glass" onClick={() => toast.error("Failed", { description: "Something went wrong." })}>Error</Button>
8    <Button size="sm" variant="glass" onClick={() => toast.warning("Careful", { description: "This cannot be undone." })}>Warning</Button>
9    <Button size="sm" variant="glass" onClick={() => toast.info("Heads up", { description: "A new version is available." })}>Info</Button>
10    <Button size="sm" variant="glass" onClick={() => toast.loading("Processing...")}>Loading</Button>
11  </div>
12)
13}

Action Button$

Add an action button for undo-style workflows.

TSX

1import { toast, Button } from "@glinui/ui"
2
3export function ToastActionDemo() {
4return (
5  <Button onClick={() => toast("File deleted", {
6    description: "The file has been moved to trash.",
7    action: { label: "Undo", onClick: () => toast.success("Restored") }
8  })} variant="liquid">
9    Delete file
10  </Button>
11)
12}

Promise Toast$

Automatically transitions from loading to success or error based on promise outcome.

TSX

1import { toast, Button } from "@glinui/ui"
2
3export function ToastPromiseDemo() {
4const generateReport = () =>
5  new Promise((resolve) => setTimeout(resolve, 2000))
6
7return (
8  <Button onClick={() => toast.promise(generateReport(), {
9    loading: "Generating report...",
10    success: "Report is ready and shared with your team.",
11    error: "Failed to generate report"
12  })} variant="glass">
13    Generate report
14  </Button>
15)
16}

Custom Duration$

Set duration per-toast or globally on the Toaster.

TSX

1// 10 second toast
2toast("Long-running task", { duration: 10000 })
3
4// Persistent toast (no auto-close)
5toast("Requires action", { duration: Infinity })

Dismiss$

Dismiss a specific toast by ID or all toasts at once.

TSX

1const id = toast("Processing...")
2// Later...
3toast.dismiss(id)   // dismiss specific
4toast.dismiss()     // dismiss all

Glass Variant$

Use variant="glass" on the Toaster for frosted glass surfaces.

TSX

1<Toaster variant="glass" />

Matte Variant$

TSX

1<Toaster variant="matte" />

Positions$

Six positions: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right.

TSX

1<Toaster position="top-center" />

Accessibility$

ARIA live region announcements for all toast types.
Auto-pause on hover gives users time to read.
Swipe-to-dismiss with configurable direction.
Keyboard accessible with hotkey support (Alt+T by default).
Keep toast messages short (under 140 characters) for screen readers.

Reduced Motion$

Slide and opacity transitions respect prefers-reduced-motion. When enabled, toasts fade in without translate animation.

API Reference$

Toaster$

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from toastVariants.
`variant`	`"default" \| "glass" \| "frosted" \| "matte"`	No	`"glass"`	Variant option from toastVariants.

toast() Options$

Sonner runtime options remain available on toast() calls:

description: secondary content below title
duration: per-toast auto-dismiss timeout
icon: custom icon node
action: primary button { label, onClick }
cancel: secondary button { label, onClick }
onDismiss, onAutoClose: lifecycle callbacks
dismissible: allow swipe/click dismissal

Source$

TSX

1import { Toaster, toast } from "@glinui/ui"

packages/ui/src/components/sonner.tsx

packages/ui/src/components/toast.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/toast.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

ToastProps

`ToastCloseProps`

No explicit fields extracted for this props type.

`ToastDescriptionProps`

No explicit fields extracted for this props type.

`ToastProps`

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from toastVariants.
`variant`	`"default" \| "glass" \| "frosted" \| "matte"`	No	`"glass"`	Variant option from toastVariants.

`ToastTitleProps`

No explicit fields extracted for this props type.

`ToastViewportProps`

No explicit fields extracted for this props type.