Alert

Displays important messages with contextual styling

Basic Usage

Heads up!

You can add components to your app using the CLI.

Error

Your session has expired. Please log in again.

Update available

A new version is available. Update now to get the latest features.

pnpm add @corew500/ui

import { Alert } from "@corew500/ui/alert"

<Alert>Content</Alert>

Axis	Values	Default
`variant`	defaultdestructivesuccesswarninginfo	default

CMSPayload CMS Integration

This component supports CMS-driven content via @corew500/cms-payload.

Important Notice

Please review your account settings to ensure your information is up to date.

CMS FieldsEN

Title

Description

Variant

Action Label

Show Icon

Show Action Button

This simulates how a content editor configures alerts in Payload CMS. Title, description, and action labels can be localized.

Prop	Type	Default	Description
`variant`	enum	—	—

- Uses role="alert" for destructive/warning variants (live region, interrupts screen readers)
Uses role="status" for default/info/success variants (polite announcements)
Icons should have aria-hidden="true" (decorative)