Toast

Non-blocking notification on the overlay layer. Same glass in every variant — tone is a tint in the material, not a different card.

Variants

Each opens bottom-right. Trigger two at once to compare them in place.

// app/layout.tsx
import { ThemeProvider, Toaster } from '@tra/ui';

export default function RootLayout({ children }) {
  return (
    <ThemeProvider>
      <Toaster>{children}</Toaster>
    </ThemeProvider>
  );
}

// client component
import { useToast } from '@tra/ui';

const { toast } = useToast();
toast({
  variant: 'success',
  title: 'Reservation confirmed',
  description: 'Site 14B is booked for July 4–7.',
});

How tone works

Every variant is the same glass: identical fill density, blur and shadow. Tone is a tint mixed into that fill — 16% in light, 24% in dark — plus the title in the tone colour. The description stays text-ink-soft and carries the message, so tone never costs legibility: titles measure 5.5–15.3:1 and descriptions 5.4–9.3:1 across both themes.

The title is toned because the tint alone can't carry meaning in dark, and no amount of it can — the full reasoning is hard rule 3 in docs/design-system-glass.md. The practical version: don't reach for --overlay-tint to make a variant louder.

Anatomy

Toaster mounts the provider, viewport, and queue. useToast() pushes one entry per call. Each entry is a Toast with title, optional description, and close control.

Toast lays its children out as a column, so ToastTitle and ToastDescription stack, and ToastClose is positioned in the top-right corner rather than laid out in flow.

ToastViewport is the fixed bottom-right stack, and it stacks in DOM order — so drive it from a queue, one entry per notification. A fixed list with one Toast per variant pins each to the same slot no matter when it fired. Toaster owns that queue. Mount one host per app root; this page mounts a page-local Toaster for the demos, since five separate hosts would mean five viewports pinned to the same corner.

The building blocks (ToastProvider, ToastViewport, and the Toast parts) stay exported if you need a custom host.