Sonner

A modern opinionated toast notification system and alternative to Toast. Stacks notifications in a queue with auto-dismiss, rich semantic types, and promise-based toasts for async actions.

✓Stacked toast queue with auto-dismiss
✓Promise-based toast for async actions
✓Themed to match Aether UI tokens
✓Rich toast types: success, error, warning, info

import { Sonner }from "@aetherstack/ui"

sonner.tsx

"use client"

import { SonnerToaster, sonnerToast, Button } from "@/components/ui/sonner"

export function SonnerDemo() {
  return (
    <>
      <SonnerToaster />
      <div className="flex flex-wrap gap-2">
        <Button variant="outline" onClick={() => sonnerToast("Default notification")}>
          Default
        </Button>
        <Button variant="outline" onClick={() => sonnerToast.success("Saved!")}>
          Success
        </Button>
        <Button variant="outline" onClick={() => sonnerToast.error("Something went wrong")}>
          Error
        </Button>
      </div>
    </>
  )
}

Usage

All types

Fire default, success, error, and warning toasts.

With description

Add a description for more context.

Promise toast

Track async operations with loading, success, and error states automatically.

Props

Prop	Type	Default	Description

SonnerToaster

Prop	Type	Default	Description
position	"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"	"bottom-right"	Screen position where toasts appear.
richColors	boolean	false	Enables richer semantic color themes for each toast type.
expand	boolean	false	Expands all toasts by default instead of stacking them.
duration	number	4000	Default auto-dismiss duration in milliseconds.
closeButton	boolean	false	Renders a close button on each toast.

sonnerToast()

Prop	Type	Default	Description
message	string \| ReactNode	—	The main toast message.
description	string \| ReactNode	—	Optional secondary text below the message.
duration	number	—	Per-toast override for auto-dismiss duration.
action	{ label: string; onClick: () => void }	—	Optional action button rendered inside the toast.

* Required props

Accessibility

→Sonner renders toasts in an aria-live region — screen readers announce new toasts automatically.
→Use closeButton prop on SonnerToaster to give keyboard users an explicit dismiss control.
→Avoid setting duration to 0 (never dismisses) for non-critical toasts — users may miss them.
→For critical errors, prefer a Dialog or Alert component over a transient toast.