@edux-design/alerts

Composable alert primitives for the Edux design system. The package exports a slotted <Alert> container plus <Alert.Title>, <Alert.Body>, and <Alert.Close> helpers so you can describe feedback layouts declaratively while the component handles structure, focus styling, and tone-based theming.

• Tone aware – pass type="info" | "success" | "warning" | "error" | "corrective" | "neutral" to switch borders, backgrounds, and the indicator chip.
• Size variants – choose between the standard layout or size="small" for compact surfaces.
• Slots instead of props – compose Title/Body/Close in any order; the Alert finds them by displayName and places them where they belong.
• Focusable dismissal – the provided close button includes the shared focus:shadow-focus treatment and an accessible label (aria-label="Dismiss").

Installation

pnpm add @edux-design/alerts @edux-design/utils @edux-design/icons
# or
npm install @edux-design/alerts @edux-design/utils @edux-design/icons

Peer dependencies: react@^19.1.0, react-dom@^19.1.0.

Quick Start

import { Alert } from "@edux-design/alerts";

export function InviteBanner({ onDismiss }) {
  return (
    <Alert type="success" className="max-w-xl">
      <Alert.Title>Invite sent</Alert.Title>
      <Alert.Body>
        We’ve emailed the invite to your teammate. They have 7 days to accept.
      </Alert.Body>
      <Alert.Close onClick={onDismiss} />
    </Alert>
  );
}

Note: Alert.Close renders a positioned button by default. If you need a custom dismiss action, you can supply your own button inside the children tree—Alert will simply render it where you place it.

API

<Alert />

| Prop | Type / Values | Description | | ----------- | -------------------------------------------------------------------------------------- | ------------------------------------------------------ | | type | "neutral" (default), "info", "success", "warning", "error", "corrective" | Controls the border, background, and indicator accent. | | size | "default" (min-height 56px), "small" (min-height 47px) | Adjusts padding/height for compact alerts. | | className | string | Additional Tailwind/utility classes merged via cx. | | ...rest | Any native <div> props | Passed through to the root container. |

Alert searches its children for the slotted subcomponents:

• Alert.Title – renders typography for the heading (defaults to "Alert" if omitted).
• Alert.Body – renders supporting copy (defaults to "Body" if omitted).
• Alert.Close – renders the default dismiss button. You may include more than one close button; the component does not enforce positioning beyond the provided slot area.

<Alert.Title /> / <Alert.Body />

Plain wrappers that set displayName so the parent can detect them. They accept any children (text or nested elements) and return them as-is.

<Alert.Close />

Props:

| Prop | Type | Description | | ----------- | ------------ | ------------------------------------------------------------ | | className | string | Additional classes merged with the circular icon-button skin | | ...rest | button props | Useful for adding custom onClick, analytics, etc. |

Stories

See src/demos/Alerts.stories.jsx for examples that cover:

• Every semantic tone
• The small size variant
• Alerts with or without titles
• Longer, multi-line content scenarios

You can copy these stories into your local Storybook (or docs site) to preview new token changes quickly.

Development Notes

• Build with pnpm --filter @edux-design/alerts build (tsup emits ESM/CJS bundles plus types under dist/).
• Run pnpm --filter @edux-design/alerts lint and pnpm --filter @edux-design/alerts check-types before publishing.
• The helper filterChildrenByDisplayName currently lives inside Alert.jsx. If other packages need the same behavior, extract it into @edux-design/utils.
• TODOs in the component call out future enhancements (shared icon button, escape-key handling, assertive live regions). Keep them in mind when extending functionality.

Need adjustments or new alert variants (toast, inline banners, etc.)? Open an issue or PR so we can expand this package consistently with the rest of the system.