Alert

An inline notification banner for important messages. Supports default and destructive variants with optional leading icon.

Heads up!

You can add components to your app via the CLI with pnpm dlx @hex-core/cli add.

Error

Your session has expired. Please sign in again.

Installation

pnpm

pnpm dlx @hex-core/cli add alert

Destructive alert

Error alert

tsx

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

With action button

Inline recovery action right-aligned beside the description

tsx

<Alert>
  <div className="flex items-start justify-between gap-4">
    <div>
      <AlertTitle>Draft saved</AlertTitle>
      <AlertDescription>Your changes are stored locally. Publish to make them live.</AlertDescription>
    </div>
    <Button variant="link" className="shrink-0 px-0" onClick={() => undoLastSave()}>
      Undo
    </Button>
  </div>
</Alert>

Variant values

variantAlert style

Heads up!

You can add components to your app via the CLI.

Session expired

Your session has expired. Please sign in again to continue.

Value	Description
`default`default	Neutral inline notification
`destructive`	Error or warning with red accent + tinted background

API Reference

Prop	Type	Default	Description
`variant`	`"default" \| "destructive"`	default	Visual style
`className`	`string`	—	Additional CSS classes

AI Guidance

When to use

Use for inline, persistent messages that contextualize a page or section: info banners, warning about deprecated features, error summaries above forms.

When not to use

Don't use for transient messages (use Toast/Sonner). Don't use for modal confirmations (use AlertDialog). Don't use as the only way to communicate a critical error — pair with field-level feedback.

Common mistakes

Using destructive for non-error messages
Missing AlertTitle (reduces scannability)
Stacking multiple Alerts on the same page instead of grouping

Accessibility

Root renders role='alert' so screen readers announce it. For non-urgent info banners consider role='status' or aria-live='polite' via className overrides.

Related components

Token budget: 350

Verified against @hex-core/components@1.12.0

Edit this page on GitHub