ToastCard

A static, server-renderable notification card for editorial display of toast anatomy. Use in state galleries and design documentation — not for imperative portal notifications.

ToastCard vs Toast: ToastCard is the static editorial rendering of a notification card — used in state gallery screens to show toast anatomy in-flow. It has no portal, timer, or Sonner dependency. For imperative notifications that auto-dismiss, use Toast.

Variants

Each variant receives a distinct filled icon badge whose background uses the corresponding semantic token. The glyph defaults per variant: CheckCircle (success), WarningCircle (error), Info (info), Warning (warning).

Changes saved

Your profile has been updated.

Upload failed

The file exceeds the 10MB limit.

New update available

Refresh to load the latest version.

Storage almost full

You have used 90% of your storage quota.

With Action

Provide action text and an onAction handler to render a primary-colored action affordance. When onAction is omitted, the action renders as static text (server-safe).

Sync failed

Could not connect to the server.

With Dismiss

Provide an onDismiss handler to render a muted X dismiss control.

New update available

Refresh to load the latest version.

Custom Icon

Override the default per-variant glyph via the icon prop.

Deployment complete

Your app is live.

Installation

npx visor add toast-card

This copies two files into your project:

components/ui/toast-card/toast-card.tsx — the component
components/ui/toast-card/toast-card.module.css — the styles

Usage

import { ToastCard, ToastCardStack } from '@/components/ui/toast-card/toast-card';

// Basic
<ToastCard variant="success" title="Changes saved" />

// With body and dismiss
<ToastCard
  variant="error"
  title="Upload failed"
  body="The file exceeds the 10MB limit."
  onDismiss={() => setVisible(false)}
/>

// Stacked (fixed top-right column)
<ToastCardStack>
  <ToastCard variant="success" title="Saved" />
  <ToastCard variant="error" title="Upload failed" body="File too large." />
  <ToastCard variant="info" title="Update available" />
</ToastCardStack>

Prop	Type	Default	Description
`top`	`string`	`var(--spacing-6)`	Distance from the top of the viewport. Maps to `--toast-card-stack-top`.
`gap`	`string`	`var(--spacing-3)`	Vertical gap between cards. Maps to `--toast-card-stack-gap`.

ToastCardStack also accepts all standard <div> HTML attributes.

Disambiguation

Component	Use when
`ToastCard`	Static editorial card — state galleries, docs, design specimens
`Toast`	Imperative portal notification — triggered by user actions, auto-dismisses

Accessibility

Each card renders role="status" and aria-live="polite" so screen readers announce content updates politely.
The dismiss button has aria-label="Dismiss notification".
The icon slot renders aria-hidden="true" — decorative; the title conveys the meaning.
For urgent errors that require immediate announcement, consider adding aria-live="assertive" via a data- attribute or wrapping element.

Customization

After copying the component, common customizations include:

// Retune the stack position
<ToastCardStack top="var(--spacing-8)" gap="var(--spacing-2)">
  <ToastCard variant="success" title="File uploaded" />
</ToastCardStack>

// Custom icon glyph
import { CloudCheck } from '@phosphor-icons/react';

<ToastCard
  variant="success"
  title="Synced"
  icon={<CloudCheck weight="fill" />}
/>