Alert

Displays a callout for user attention. Supports default and destructive variants with optional icon, title, and description.

Installation
# Install @opencosmos/ui to use Alert
pnpm add @opencosmos/ui
Preview
Loading preview...
Customize
— Visual style variant - default for informational alerts, destructive for errors or warnings
Usage
Import
import { Alert } from '@opencosmos/ui';
Example
<Alert>
  Content
</Alert>
Eject
Copy this component into your project for full customization

API Reference

PropTypeDefaultDescription
variantdefault | destructive"default"Visual style variant - default for informational alerts, destructive for errors or warnings

Accessibility

  • Uses role="alert" for screen reader announcements
  • WCAG 2.1 AA compliant color contrast
  • Keyboard accessible
  • Supports both title and description for complete context

Examples

Default
Destructive

Code Examples

Basic Usage

Simple informational alert with title and description

import { Alert, AlertDescription, AlertTitle } from '@opencosmos/ui';

<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components to your app using the cli.
  </AlertDescription>
</Alert>

Destructive Variant

Error alert using destructive variant

import { Alert, AlertDescription, AlertTitle } from '@opencosmos/ui';

<Alert variant="destructive">
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>
    Your session has expired. Please log in again.
  </AlertDescription>
</Alert>