Connor Adams · Design System

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

PropTypeDefaultDescription
variant"default" | "success" | "warning" | "error" | "info" | undefineddefault
titleReactNode
actionReactNode
onClose(() => void) | undefined
classNamestring | undefined
styleCSSProperties | undefined