overlays
Toast
Variants
Transaction imported
142 transactions were added to your account.
Budget exceeded
You have exceeded your monthly dining budget by $24.
Import
import { Toast } from '@connor-adams/designsystem'Usage
A transient confirmation that floats bottom-right (transaction saved, statement imported, sync failed). Auto-dismiss after a few seconds; keep copy to one line.
<Toast variant="success" title="Statement imported" onClose={dismiss}>
312 transactions added from Amex Cobalt.
</Toast>
Variants: default | success | error | warning | info. Optional action node under the body. Presentational — drive visibility and stacking from your own state.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "success" | "warning" | "error" | "info" | undefined | default | |
| title | ReactNode | — | |
| action | ReactNode | — | |
| onClose | (() => void) | undefined | — | |
| className | string | undefined | — | |
| style | CSSProperties | undefined | — |