Toast
Ephemeral notification toasts with auto-dismiss, variants, and optional actions.
Installation
npx dafink-ui add toastDemo
bottom right · stacks upward
Props
| Name | Type | Default | Description |
|---|---|---|---|
| position | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'bottom-right' | Where toasts appear on screen. |
| title | string | undefined | Bold heading text. |
| description | string | undefined | Body message. |
| variant | 'default' | 'success' | 'warning' | 'danger' | 'default' | Color and icon style. |
| duration | number | 4000 | Auto-dismiss delay in ms. |
| action | { label: string; onClick: () => void } | undefined | Optional action button. |
Accessibility
Toast has no special focus management: it never moves focus or traps it. Each card renders with role="status" and aria-live="polite" by default (role="alert" and aria-live="assertive" for the danger variant) plus aria-atomic="true", so screen readers announce it as soon as it mounts. The dismiss button and the optional action button sit in normal document tab order and are reached and activated with Tab and Enter/Space like any other button; there is no Escape-to-dismiss shortcut, dismissal is click/activation-driven only.