Alert

Contextual feedback banners with five severity variants. Pure CSS — no Radix dependency.

✓5 variants: default, destructive, warning, success, info
✓Icon slot via svg sibling selectors — just drop an SVG inside
✓AlertTitle for bold heading, AlertDescription for body text
✓role="alert" for screen reader announcement

Default

A neutral informational message.

Info

Your session will expire in 10 minutes.

Success

Your changes have been saved.

Warning

This action cannot be undone.

Destructive

Failed to save changes. Please try again.

import { Alert }from "@aetherstack/ui"

alert.tsx

import { Alert, AlertTitle, AlertDescription } from "@aetherstack/ui"
import { CheckCircle2 } from "lucide-react"

<Alert variant="success">
  <CheckCircle2 className="h-4 w-4" />
  <AlertTitle>Success</AlertTitle>
  <AlertDescription>Your changes have been saved.</AlertDescription>
</Alert>

Usage

Without icon

The icon slot is optional — the layout adapts automatically.

Heads up

Maintenance window is scheduled for Sunday at 02:00 UTC.

Description only

AlertTitle is optional — use just AlertDescription for brief messages.

You have unsaved changes.

Props

Prop	Type	Default	Description
variant	"default" \| "destructive" \| "warning" \| "success" \| "info"	"default"	Controls border and text colour of the alert.
className	string	—	Additional classes on the alert div.
...props	React.HTMLAttributes<HTMLDivElement>	—	All standard HTML div attributes.

* Required props

Accessibility

→Alert has role="alert" so screen readers announce it immediately when it appears in the DOM.
→For non-urgent updates consider role="status" instead — override via the role prop.
→If the alert contains a link or button, ensure those are keyboard-accessible.