Components
Alert
Token-driven alert banner with semantic tones and three emphasis levels.
Variants
soft (default), outlined, and solid. Each variant keeps the same semantic
tone while changing how much surface fill the message gets.
Usage
import { Alert } from '@cajon-ui/react';
<Alert heading="Info">A sync is in progress.</Alert>
<Alert tone="success" variant="outlined">
Changes were published successfully.
</Alert>
<Alert heading="Warning" tone="warning" variant="solid">
Budget threshold exceeded.
</Alert>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
heading | ReactNode | — | Optional heading row |
tone | neutral | primary | success | error | warning | info | info | Semantic treatment |
variant | soft | outlined | solid | soft | Surface emphasis |
All other native <div> attributes pass through; the component forwards its
ref and uses role="alert" by default.