Alert
A block-level notice component. Expresses the same intent × appearance model as Badge, at paragraph scale.
Alert is Badge at block scale. The same intent and appearance axes apply. You say what the notice is communicating — the component handles the visual treatment.
Intent
Deployment complete
Your changes are live in production.
Approaching limit
You have used 90% of your monthly quota.
Action required
Your payment method failed. Update it to continue.
Scheduled maintenance
The system will be unavailable on Sunday from 2–4 AM UTC.
Note
Changes to this setting take effect on next login.
<Alert intent="success" title="Deployment complete">Your changes are live.</Alert>
<Alert intent="warning" title="Approaching limit">90% of quota used.</Alert>
<Alert intent="danger" title="Action required">Payment method failed.</Alert>
<Alert intent="info" title="Scheduled maintenance">Downtime Sunday 2–4 AM UTC.</Alert>
<Alert intent="neutral" title="Note">Changes take effect on next login.</Alert>Appearance
soft — subdued, reads inline
Soft is the default. Good for contextual notices within a page.
solid — high-emphasis
Solid commands attention. Use for critical blocking errors.
soft (default) is appropriate for contextual notices inline on a page. solid is for critical, blocking alerts that must command attention.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
intent | Intent | "neutral" | What this alert communicates. Drives color. |
appearance | "soft" | "solid" | "soft" | Visual weight. |
title | string | — | Optional bold title rendered above the body. |
children | ReactNode | — | Alert body content. |
className | string | — | Layout overrides only. |
Source
packages/ui/src/alert.tsx — copy into components/ui/alert.tsx in your project.