Toast

Toast is the ephemeral confirmation surface. Use for short-lived "this just happened" messages — saved, copied, queued, retrying. The surface stays neutral white; only the leading Badge changes color to communicate success / error / warning / info.

For persistent state alerts, use Banner. For hover-only help, use Tooltip.

Use it for

• Save / publish / delete confirmations after a user action
• "Copied to clipboard" feedback
• Queued / scheduled / retrying status pings
• Any sub-second-to-few-seconds confirmation that the user can dismiss when ready

Import

import { Toast } from '@brikdesigns/bds';

Variants

Five variants — default (no badge) plus four status badges.

<Toast title="Just so you know" variant="default" />
<Toast title="Saved" description="Settings updated." variant="success" />
<Toast title="Couldn't save" description="Try again." variant="error" />
<Toast title="Almost there" description="Trial ends tomorrow." variant="warning" />
<Toast title="Heads up" description="Maintenance scheduled." variant="info" />

• default — No badge, no icon. Plain text confirmation.
• success — Positive badge, circle-check icon.
• error — Error badge, circle-exclamation icon.
• warning — Warning badge, triangle-exclamation icon.
• info — Info badge, circle-info icon.

Title-only

description is optional. For one-line confirmations the title alone reads cleaner.

<Toast title="Saved" variant="success" onDismiss={() => hide()} />

Non-dismissible

Omit onDismiss and the close button is hidden. Use for self-dismissing toast queues controlled by a parent provider.

<Toast title="Saved" variant="success" />

When not to use

• Don't use Toast for required user input. Toasts dismiss; if the user must respond, use a Banner or modal.
• Don't stack 5 Toasts. A queue of 2-3 is fine; longer queues are noisy. Aggregate ("3 changes saved").

Accessibility

• Renders a <div role="status" aria-live="polite"> so screen readers announce the toast on render without interrupting current speech.
• For destructive or critical messages, escalate to role="alert" (aria-live="assertive") — but prefer Banner for those, since Toast's auto-dismiss conflicts with critical content.
• Dismiss button carries aria-label="Dismiss notification".

API

Plus all standard <div> HTML attributes (excluding title).

CSS Override API

.side-panel {
  --toast-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
}

Related

• Banner — persistent sibling
• Tooltip — hover-revealed sibling
• Badge — the status badge rendered inside Toast
• Storybook playground