CatalystBannerv1.1.3Ready for Production
A non-interactive component for displaying static status information to users. Similar to Alert, but without user actions.
Prefer AI-assisted development?
Catalyst Banner is a compound primitive built from scratch with no upstream dependency. Banner 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-bannerimport { BannerRoot, BannerTitle, BannerDescription } from '@pmi/catalyst-banner';Variants
Neutral
General information without specific sentiment.
Info
Helpful context or tips for the user.
Warning
Important information that requires attention.
Success
Confirmation of a successful operation.
Danger
Critical information about errors or destructive actions.
Common Patterns
With Icon (neutral)
With Icon (info)
With Icon (warning)
With Icon (success)
With Icon (danger)
API Reference
BannerRoot
Extends all standard HTML div element props. The container with variant-based background and border colors.
Forwards ref to the underlying HTMLDivElement.
Prop
Type
BannerTitle
Extends all standard HTML div element props. Bold title text with variant-matched colors.
Forwards ref to the underlying HTMLDivElement.
Prop
Type
BannerDescription
Extends all standard HTML div element props. Supporting description text.
Forwards ref to the underlying HTMLDivElement.
Prop
Type
Accessibility
ARIA
BannerRootincludesrole="status"by default (announces non-urgent status changes to screen readers without interrupting the user)- For urgent alerts consider using the Alert component with
role="alert"instead
Choosing the Right Component
Use this component when you need to display static status information without user actions. Reach for a different primitive when:
| If you need… | Use instead |
|---|---|
| To surface contextual, dismissible feedback tied to a user action or system event | Alert |
| To highlight important information | Callout |