‹ components

Alert

draftv0.9.0·open in canvas

Inline callout for conditions — info, success, warning, error — on the tinted state surfaces.

Installnpx shadcn add @cids/alert
Live demo

warningHigh price impact

This trade moves the pool price by 4.2%.

Motion · tap to replay

honors reduced-motion

None. Alerts appear with their content; a condition arriving *after* render is usually a Toast's job first, then an Alert if it persists.

This component declares no motion.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { Alert, Button } from "@/design-system";

<Alert tone="warning" title="High price impact">
  This trade moves the pool price by 4.2%.
</Alert>

<Alert tone="error" title="Feed unavailable" action={<Button size="sm" variant="ghost">Retry</Button>}>
  Prices may be stale.
</Alert>

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

States · live

Forced instances — hover/focus still work on the live demo above.

**and a tone word** — direction never rides oncolor alone .

info

noteNetwork fee updated

success

okSwap confirmed

warning

warningHigh slippage

error

Inline callout for conditions — info, success, warning, error — on the tinted state surfaces.

Anatomy

┌────────────────────────────────┐
│ NOTE Title            [Action] │ ← tone word + title (tone ink)
│ supporting line                │ ← children (fg-muted)
└────────────────────────────────┘ ← tinted state surface, rounded-card

Props

PropTypeDefaultNotes
tone"info" "success" \"warning" \"error"`"info"Picks surface tint + ink + tone word.
titlestring—Required — the condition, stated plainly.
childrenReactNode—Optional supporting line(s).
actionReactNode—Right-aligned affordance (small Button).
classNamestring—cn-merged.

Motion

None. Alerts appear with their content; a condition arriving *after*

render is usually a Toast's job first, then an Alert if it persists.

A11y

role="alert" (assertive) only for tone="error"; the rest use

role="status" (polite) so screen readers aren't interrupted for

notes. The tone word doubles as a non-color state cue. Keep title

meaningful without the body — it's what gets announced first.

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.