CatalystAlertv1.1.1Ready for Production
Display contextual dismissible feedback messages with semantic variants for informational, success, warning, and error states.
Prefer AI-assisted development?
Catalyst Alert is a compound primitive built from scratch with no upstream dependency. Alert goes with built-in design tokens, CVA variants, and accessibility defaults — giving you a production-ready component with zero configuration.
Installation
npm install @pmi/catalyst-alertimport { AlertRoot, AlertTitle, AlertDescription, AlertDismiss } from "@pmi/catalyst-alert";Variants
Info
The default variant for general informational messages that do not require immediate attention.
Success
This variant is ideal for confirming successful actions or positive outcomes, such as form submissions or completed tasks.
Warning
Cautionary messages that alert users to potential issues or important considerations but are not critical errors.
Danger
Critical messages that indicate errors, failures, or urgent issues requiring immediate attention.
Sizes
The Alert primitive does not expose a size variant. Width is controlled by the w-[700px] base class on AlertRoot. Override this with className to fit your layout.
Common Patterns
Patterns using Icon and action Button are already described in the Variants section.
API
AlertRoot
Extends all standard HTML div element props. The container part. Renders the Alert background, border, and layout.
Prop
Type
AlertTitle
Extends all standard HTML div element props. The heading part. Renders a styled title inside the Alert.
Prop
Type
AlertDescription
Extends all standard HTML div element props. The body text part. Renders supporting detail below the title.
Prop
Type
AlertDismiss
Extends all standard HTML div element props. The dismiss control part. Positioned absolutely at the top-right corner of the alert. Renders with tabIndex={0} for keyboard focus.
Prop
Type
Accessibility
Keyboard Interactions
| Key | Action |
|---|---|
Tab | Moves focus to the next focusable child. AlertDismiss receives focus via tabIndex={0}. |
Enter / Space | Is not handled by default. You can activate the focused AlertDismiss, triggering onKeyDown handler. |
ARIA
- The primitive does not apply ARIA roles or live-region attributes by default. Add them based on the urgency of the alert
- Use
role="alert"onAlertRootfor important notification that should interrupt immediately (equivalent toaria-live="assertive") - Use
aria-live="polite"onAlertRootfor informational update that can wait for the next pause - Use
role="alert"+aria-atomic="true"onAlertRootfor urgent system error and content change - Always add
aria-label="Dismiss alert"toAlertDismissso screen readers announce its purpose.
Choosing the Right Component
Use Alert to surface contextual, dismissible feedback tied to a user action or system event — form validation results, save confirmations, permission warnings. Use Alert for inline messaging that appears within the page flow near the relevant content, not as a page-level overlay.
Reach for a different primitive when:
| If you need… | Use instead |
|---|---|
| A page-wide or site-wide announcement that persist across navigation | Banner |
| A transient notification that auto-dismiss after a timeout (e.g., toast messages) | Toast |
| To draw attention to important information without interaction | Callout |