Components

Toast

A transient, self-dismissing notification that appears in the bottom-right corner of the viewport, on every screen. Built on sonner for stacking, swipe-to-dismiss, and timing - DEW only supplies the card, reusing Button, CloseButton, and FeaturedIcon from Alert. Colours and demo sections are driven from config/design-system.config.ts.

Component Playground

The canvas shows a static preview of ToastCard so the visual is always visible. Use Fire toast to trigger the real imperative toast.*() call and see the actual corner-notification behaviour, stacking, and auto-dismiss timing.

Saved to drafts

You can find it later under Drafts.

default

Controls

Colour

Title

Description

Action label

Colours

Same six colours as Alert - each pairs a FeaturedIcon tint with a matching icon (info/alert/check).

Colours

With action

Pass actionLabel and onAction for an inline follow-up - rendered as a link-color Button, same as Alert's confirm action.

With action

Manual dismiss

Pass duration: Infinity to require the reader to dismiss it via the close button rather than letting it time out.

Persistent

API - toast.*(title, options)

toast exposes one function per colour - toast.default, toast.brand, toast.gray, toast.error, toast.warning, toast.success - plus toast.dismiss(id). Each takes a title and an options bag:

Option	Type	Default
`title`	`string`	`-`
`description`	`ReactNode`	`-`
`actionLabel`	`string`	`-`
`onAction`	`() => void`	`-`
`duration`	`number`	`4000`

Composition

Toast doesn't introduce a new card shape - it reuses Button, CloseButton, and FeaturedIcon, the same primitives AlertFloating composes. The only new dependency is sonner, which owns stacking order, swipe gestures, and auto-dismiss timing; DEW supplies toast.custom() a plain React card (ToastCard) instead of sonner's default styling, so every toast matches the rest of the system. Position is part of the component too: Toaster always stacks toasts in the bottom-right corner (TOAST_POSITION), lifted 88px from the bottom (TOAST_OFFSET) so a toast never covers a form's footer buttons, and takes no position prop, so every screen shows them in the same place.

Token anatomy

Identical colour → icon → theme mapping to Alert.

Colour	Icon	FeaturedIcon theme	Icon colour token
default	`InfoCircle`	`modern`	`text-fg-secondary`
brand	`InfoCircle`	`outline`	`text-fg-brand-primary`
gray	`InfoCircle`	`outline`	`text-fg-tertiary`
error	`AlertCircle`	`outline`	`text-fg-error-primary`
warning	`AlertCircle`	`outline`	`text-fg-warning-primary`
success	`CheckCircle`	`outline`	`text-fg-success-primary`

Usage

import { toast } from "@/components/application/toast/toast";

toast.success("Saved to drafts", {
  description: "You can find it later under Drafts.",
});

Figma

No linked Figma file yet - this component was pulled in via the Untitled UI CLI, not designed in Figma first.