Alert

The canonical inline status banner. <Alert /> is the DS's first opinionated feedback surface — it covers info / success / warning / danger / neutral messages with auto-icon, optional title + description + action area, and a Motion-driven dismiss.

Overview — info, success, warning, and closable danger

Loading preview…

Overview.tsx

Why this exists

Three jobs land in this component that other status surfaces (Toast, Banner, Inline-error) will reuse:

Icon-by-color. The leading icon is selected automatically from the active color via the shared _shared/iconForColor helper. One mapping, every consumer.
Constrained color set. Alerts speak about what happened — they don't carry brand. The 5-of-7 palette (no primary / secondary) is the convention.
Motion-driven exit. <AnimatePresence> makes closable Alerts dismiss with a single height + opacity tween. Surrounding layout reflows for free.

Anatomy

tsx

┌──────────────────────────────────────────────────────────┐
│  [icon]   <Title>                       [× close button] │
│           <Description>                                  │
│           <Action> [button] [button]                     │
└──────────────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────────────┐
│  [icon]   <Title>                       [× close button] │
│           <Description>                                  │
│           <Action> [button] [button]                     │
└──────────────────────────────────────────────────────────┘

<Alert.Title> / <Alert.Description> / <Alert.Action> are subparts — use only the ones you need. A bare <Alert>Saved.</Alert> is just as valid.

Variants

Variant	Background	Border	When to reach for it
`solid`	full color	none	Critical announcements, system-level alerts.
`outline`	paper	colored border	Brand-light contexts, paired with Card.
`soft`	subtle tint	low-contrast colored border	Default. Toast/banner-style notifications.
`inline`	transparent	logical-start 4px colored bar	Inline form validation, minimal chrome.

Colors

info (default) · success · warning · danger · neutral

Brand colors (primary, secondary) are intentionally excluded — they don't carry status meaning. Add them via a theme override if your product needs them.

Examples

Default — info color, soft variant

Loading preview…

Basic.tsx

All four variants

Loading preview…

Variants.tsx

Three sizes (sm / md / lg)

Loading preview…

Sizes.tsx

Every variant × every color

Loading preview…

Colors.tsx

With title + description

Loading preview…

WithTitle.tsx

With action button row

Loading preview…

WithAction.tsx

Closable + Motion exit

Loading preview…

Closable.tsx

Custom leading icon

Loading preview…

CustomIcon.tsx

Hide icon (chrome-less)

Loading preview…

HideIcon.tsx

Controlled — parent owns open state

Loading preview…

Controlled.tsx

Inline variant under a form field

Loading preview…

FormValidation.tsx

Stacked / dismissable list

Loading preview…

Stacked.tsx

Props

Prop	Type	Default	Notes
`variant`	`'solid' \| 'outline' \| 'soft' \| 'inline'`	`'soft'`	Responsive via the `{ base, md }` shape.
`color`	`'info' \| 'success' \| 'warning' \| 'danger' \| 'neutral'`	`'info'`	Drives the auto-icon and the auto-`role`.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Padding + icon size + font scale.
`icon`	`ReactNode`	—	Overrides the auto-selected leading icon.
`hideIcon`	`boolean`	`false`	Hides the leading icon slot entirely.
`closable`	`boolean`	`false`	Renders a `×` button on the trailing edge.
`onClose`	`() => void`	—	Fired when the alert dismisses (close button or controlled `open` flip).
`open`	`boolean`	—	Controlled visibility. Pair with `onClose`.
`defaultOpen`	`boolean`	`true`	Initial visibility for the uncontrolled flow.
`role`	`'status' \| 'alert'`	auto	Auto-selects per `color`. Override only when intentional.
`className`	`string`	—	Merged via `tailwind-merge`. Last-wins.
`sx`	`Sx`	—	Theme-aware inline style.

Accessibility

Auto live-region role. info / success / neutral → role="status" (polite live region). warning / danger → role="alert" (assertive). Override only when you know.
Decorative icon. The leading icon is wrapped in an aria-hidden="true" span — the body text + role carry the meaning for screen readers.
Close button has a name. Always reads as "Dismiss" via aria-label.
Heading level is left to you. Alert.Title is a plain <div>. Wrap in <h3> / <h4> when the page outline demands a real heading.

Theming

defineTheme({
  components: {
    Alert: {
      defaultProps: { variant: 'outline', size: 'sm' },
      styleOverrides: {
        root: 'rounded-xl',
        title: 'tracking-tight',
        description: 'leading-snug',
        action: 'mt-3',
      },
    },
  },
});

defineTheme({
  components: {
    Alert: {
      defaultProps: { variant: 'outline', size: 'sm' },
      styleOverrides: {
        root: 'rounded-xl',
        title: 'tracking-tight',
        description: 'leading-snug',
        action: 'mt-3',
      },
    },
  },
});

Alert is consumed by the renderer's Theme Studio for live preview.

Prop	Type	Default	Description
closable	boolean	false	Render a built-in `×` dismiss button on the trailing edge.
color	enum	'info'	Status color.
defaultOpen	boolean	true	Initial visibility for the uncontrolled flow.
hideIcon	boolean	false	Hide the leading icon entirely.
icon	ReactNode	—	Overrides the auto-selected leading icon for the active `color`.
onClose	(() => void)	—	Fired when the alert is dismissed (via the close button or controlled `open=false`).
open	boolean	—	Controlled visibility. Pair with `onClose`.
role	enum	—	Live-region role override. Auto-selects based on `color` — info / success / neutral get `status` (polite), warning / danger get `alert` (assertive). Only override when intentional.
size	ResponsiveValue<AlertSize>	'md'	Visual size.
sx	Sx	—	Theme-aware inline style object.
variant	ResponsiveValue<AlertVariant>	'soft'	Stylistic family.

Alert

Overview — info, success, warning, and closable danger

Loading preview…

Overview.tsx

Why this exists

Three jobs land in this component that other status surfaces (Toast, Banner, Inline-error) will reuse:

Icon-by-color. The leading icon is selected automatically from the active color via the shared _shared/iconForColor helper. One mapping, every consumer.
Constrained color set. Alerts speak about what happened — they don't carry brand. The 5-of-7 palette (no primary / secondary) is the convention.
Motion-driven exit. <AnimatePresence> makes closable Alerts dismiss with a single height + opacity tween. Surrounding layout reflows for free.

Anatomy

tsx

┌──────────────────────────────────────────────────────────┐
│  [icon]   <Title>                       [× close button] │
│           <Description>                                  │
│           <Action> [button] [button]                     │
└──────────────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────────────┐
│  [icon]   <Title>                       [× close button] │
│           <Description>                                  │
│           <Action> [button] [button]                     │
└──────────────────────────────────────────────────────────┘

<Alert.Title> / <Alert.Description> / <Alert.Action> are subparts — use only the ones you need. A bare <Alert>Saved.</Alert> is just as valid.

Variants

Variant	Background	Border	When to reach for it
`solid`	full color	none	Critical announcements, system-level alerts.
`outline`	paper	colored border	Brand-light contexts, paired with Card.
`soft`	subtle tint	low-contrast colored border	Default. Toast/banner-style notifications.
`inline`	transparent	logical-start 4px colored bar	Inline form validation, minimal chrome.

Colors

info (default) · success · warning · danger · neutral

Brand colors (primary, secondary) are intentionally excluded — they don't carry status meaning. Add them via a theme override if your product needs them.

Examples

Default — info color, soft variant

Loading preview…

Basic.tsx

All four variants

Loading preview…

Variants.tsx

Three sizes (sm / md / lg)

Loading preview…

Sizes.tsx

Every variant × every color

Loading preview…

Colors.tsx

With title + description

Loading preview…

WithTitle.tsx

With action button row

Loading preview…

WithAction.tsx

Closable + Motion exit

Loading preview…

Closable.tsx

Custom leading icon

Loading preview…

CustomIcon.tsx

Hide icon (chrome-less)

Loading preview…

HideIcon.tsx

Controlled — parent owns open state

Loading preview…

Controlled.tsx

Inline variant under a form field

Loading preview…

FormValidation.tsx

Stacked / dismissable list

Loading preview…

Stacked.tsx

Props

Prop	Type	Default	Notes
`variant`	`'solid' \| 'outline' \| 'soft' \| 'inline'`	`'soft'`	Responsive via the `{ base, md }` shape.
`color`	`'info' \| 'success' \| 'warning' \| 'danger' \| 'neutral'`	`'info'`	Drives the auto-icon and the auto-`role`.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Padding + icon size + font scale.
`icon`	`ReactNode`	—	Overrides the auto-selected leading icon.
`hideIcon`	`boolean`	`false`	Hides the leading icon slot entirely.
`closable`	`boolean`	`false`	Renders a `×` button on the trailing edge.
`onClose`	`() => void`	—	Fired when the alert dismisses (close button or controlled `open` flip).
`open`	`boolean`	—	Controlled visibility. Pair with `onClose`.
`defaultOpen`	`boolean`	`true`	Initial visibility for the uncontrolled flow.
`role`	`'status' \| 'alert'`	auto	Auto-selects per `color`. Override only when intentional.
`className`	`string`	—	Merged via `tailwind-merge`. Last-wins.
`sx`	`Sx`	—	Theme-aware inline style.

Accessibility

Auto live-region role. info / success / neutral → role="status" (polite live region). warning / danger → role="alert" (assertive). Override only when you know.
Decorative icon. The leading icon is wrapped in an aria-hidden="true" span — the body text + role carry the meaning for screen readers.
Close button has a name. Always reads as "Dismiss" via aria-label.
Heading level is left to you. Alert.Title is a plain <div>. Wrap in <h3> / <h4> when the page outline demands a real heading.

Theming

defineTheme({
  components: {
    Alert: {
      defaultProps: { variant: 'outline', size: 'sm' },
      styleOverrides: {
        root: 'rounded-xl',
        title: 'tracking-tight',
        description: 'leading-snug',
        action: 'mt-3',
      },
    },
  },
});

defineTheme({
  components: {
    Alert: {
      defaultProps: { variant: 'outline', size: 'sm' },
      styleOverrides: {
        root: 'rounded-xl',
        title: 'tracking-tight',
        description: 'leading-snug',
        action: 'mt-3',
      },
    },
  },
});

Alert is consumed by the renderer's Theme Studio for live preview.