Basics

Toasts

Timely feedback and actionable notifications, built on the shadcn Base UI toast.

Compact notifications

Short updates with an inline action. These examples dismiss automatically after five seconds.

New assessment

Neues Accessment Center

AC Mechatroniker wurde bereitgestellt

Participant activity

Alina Wiking hat den AC Handwerker begonnen.

Notification cards

Context and next steps for important events. These examples stay open until an action or dismissal.

Anonymization warning

Der AC "Buchauthoren" wird demnächst anonymisiert

Der Anonymisierungsprozess wird in 8 Tagen gestartet (19.09.2026 - 23:59).

Test completed

"Maxima Muster" hat den Test beendet

AC "Kaufmännische/r Mitarbeiter:in"

Assessment ending soon

Die Laufzeit des AC "Kaufmännische/r Mitarbeiter:in" endet bald

Der AC wird in 7 Tagen beendet (19.09.2026 - 23:59).

Behavior

Toasts stack at the bottom right and expand on hover or focus. Timers pause during interaction. Swipe to dismiss, or press F6 to focus the notifications and Tab to reach their actions.

Demo actions only update the message below. The dates and names above are sample content from Figma.

No demo action selected.

Use persistent messages for actions people must read. Keep critical information available in the page as well.

shadcn Toast Figma reference

Usage and props

Import shared components from @wafm/ui. Keep workflow state and data fetching in the application.

Toast / Toaster

import { Toaster, toast } from '@wafm/ui/components/toast'
import { ClipboardTextIcon } from '@phosphor-icons/react'

// Mount once in the application layout.
<Toaster />

// Call from an event handler or after an async operation.
const id = toast.add({
  title: 'Neues Accessment Center',
  description: 'AC Mechatroniker wurde bereitgestellt',
  actionProps: {
    children: 'anzeigen',
    onClick: () => {
      openAssessment()
      toast.close(id)
    },
  },
  data: { layout: 'compact', icon: <ClipboardTextIcon /> },
})

Toaster: Mount once per app. Renders a bottom-right stack through a portal. Provider timeout defaults to 5000 ms; limit defaults to 3 visible toasts.
title / description: A concise message and optional supporting detail. Both accept React content.
data.layout: compact (default): icon, title, description, and inline action. inline: a smaller activity message. card: 384px notification with an icon tile, close button, and action footer.
data.icon / data.emphasis: Optional Phosphor icon and bold title. Warning and error types use a red icon tile in the card layout.
type: success, info, warning, error, or loading supplies a status icon. A custom data.icon takes precedence.
actionProps / data.secondaryActionProps: Button props for primary and secondary actions. Close the primary action explicitly with toast.close(id) after handling it. Secondary actions close automatically unless the click is prevented. Business behavior belongs to the app.
timeout / data.dismissible: timeout: 0 keeps a toast open until dismissed. data.dismissible defaults to true; set false to hide the close button. Keep persistent toasts dismissible.
priority: low (default) announces politely; high announces urgently. Use high only for time-sensitive information.
toast / createToastManager / useToastManager: add, update, close, and promise manage the lifecycle. Create a separate manager for isolated regions; pass it to Toaster. The hook reads the nearest provider.