Toaster

Light bordered-card toaster (per Figma), theme-aware, centered at the bottom. Each toast is a bg-popover card with a 1px border, shadow-xs, and a per-type colored icon on a neutral surface. Center-position toasts use translate (not transform) so unstyled / w-fit pills stay horizontally centered without fighting sonner's --y animations.

Palette saved to Coastal Kitchen

Usage

import { Toaster } from "@desk/ui/components/sonner";

Best practices

Use toasts for transient, auto-dismissing notifications; a persistent inline message is an Alert.
Mount <Toaster /> exactly once near the app root, then fire toasts with toast() from sonner — don't render a Toaster per view.

Props

Also exports

componentToaster

Composition

Builds on

Icon