Toast

Transient notification messages that appear at the bottom-right of the screen and auto-dismiss. Five semantic variants with automatic icons, swipe-to-dismiss, and ARIA live regions. Drop in <Toaster /> once and call toast() anywhere.

Built on Radix UI.

✓Five variants: default, success, warning, info, destructive — each with automatic icon
✓Module-level state — call toast() from anywhere without prop drilling
✓Convenience <Toaster /> component — add once to your root layout
✓Swipe-to-dismiss on touch devices
✓Auto-stacks up to 5 toasts (configurable via TOAST_LIMIT)
✓ARIA live region — screen readers announce new toasts automatically
✓Animated slide-up with Tailwind data-state classes

import { Toast }from "@aetherstack/ui"

toast.tsx

"use client"

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

export function ToastDemo() {
  return (
    <div className="flex gap-2">
      <Button onClick={() => toast({ title: "Saved!", description: "Changes have been saved." })}>
        Default
      </Button>
      <Button onClick={() => toast({ variant: "success", title: "Success!", description: "Action completed." })}>
        Success
      </Button>
      <Button onClick={() => toast({ variant: "info", title: "Heads up", description: "New version available." })}>
        Info
      </Button>
      <Button onClick={() => toast({ variant: "warning", title: "Warning", description: "Session expiring soon." })}>
        Warning
      </Button>
    </div>
  )
}

Usage

All variants

Five semantic variants — each includes an automatic icon and colour-coded background.

Destructive

Use variant='destructive' for errors and critical failures.

With action

Include a ToastAction for recoverable operations like undo.

Props

Prop	Type	Default	Description

toast() function

Prop	Type	Default	Description
title	ReactNode	—	Bold heading text displayed in the toast.
description	ReactNode	—	Supporting detail text below the title.
variant	"default" \| "success" \| "warning" \| "info" \| "destructive"	"default"	Controls the colour scheme and automatic icon. Choose based on the semantic meaning of the notification.
duration	number	5000	Milliseconds before the toast auto-dismisses.
action	ToastActionElement	—	Optional action button for recoverable operations (e.g. Undo).

ToastAction

Prop	Type	Default	Description
altText	string	—	Required. Screen-reader description of the action.

useToast hook

Prop	Type	Default	Description
toasts	ToastEntry[]	—	Array of active toast entries (used internally by <Toaster />).
toast(input)	(input: ToastInput) => { id, dismiss, update }	—	Imperative function to fire a toast. Returns controls to dismiss or update it.
dismiss(toastId?)	(toastId?: string) => void	—	Dismisses a toast by ID, or all toasts if no ID is provided.

* Required props

Accessibility

→ToastViewport has role='region' and aria-label='Notifications' — a landmark for assistive technology.
→Each Toast has role='status' and aria-live='polite' — announcements are non-interruptive.
→Destructive toasts use aria-live='assertive' for immediate announcement of critical errors.
→ToastAction requires altText — a descriptive label read aloud by screen readers.
→ToastClose has aria-label='Close' — announced as a dismiss control.
→Swipe-to-dismiss is available on touch devices with ARIA-appropriate interaction patterns.