Alert

Alert is used to communicate status, feedback, and important contextual information.

Use it for inline success/error notices, warnings, and informational callouts.

Installation

1. Install dependencies:

npm install class-variance-authority

2. Copy the source code:

Source in this monorepo: packages/ui/src/components/alert.tsx
Place in your project: components/ui/alert.tsx
Required utility: lib/utils.ts (for cn helper)

3. Update the import paths to match your project structure.

Usage

import {
  Alert,
  AlertDescription,
  AlertIcon,
  AlertTitle,
} from "@hoag/ui/components/alert";
 
export default function Demo() {
  return (
    <Alert>
      <AlertIcon />
      <AlertTitle>Profile updated</AlertTitle>
      <AlertDescription>Your changes were saved successfully.</AlertDescription>
    </Alert>
  );
}

Default

Profile updated

Your changes were saved successfully.

<Alert>
  <AlertIcon />
  <AlertTitle>Profile updated</AlertTitle>
  <AlertDescription>Your changes were saved successfully.</AlertDescription>
</Alert>

Semantic Variants

✓

Profile saved

Your profile has been updated successfully.

Trial ending soon

Your trial will expire in 2 days.

Payment failed

Please check your card details and try again.

<Alert variant="success">...</Alert>
<Alert variant="warning">...</Alert>
<Alert variant="destructive">...</Alert>

Primary, Light, Outline

✓

Deployment complete

Release 2.3.0 is now live.

New analytics dashboard

Explore new metrics in the insights section.

Sync failed

Could not sync records. Retry in a few minutes.

<Alert variant="heavy-success">...</Alert>
<Alert variant="light-info">...</Alert>
<Alert variant="outline-error">...</Alert>

Without Border

Set outlined={false} to remove border while keeping variant colors.

Maintenance window

Scheduled on Sunday, 01:00-03:00 UTC.

<Alert variant="light-warning" outlined={false}>
  <AlertIcon>!</AlertIcon>
  <AlertTitle>Maintenance window</AlertTitle>
  <AlertDescription>Scheduled on Sunday, 01:00-03:00 UTC.</AlertDescription>
</Alert>

Custom Icon Content

AlertIcon is a generic slot. You can pass any icon/text node.

Action required

Verify your billing email before continuing.

<Alert variant="destructive">
  <AlertIcon className="font-semibold">!!</AlertIcon>
  <AlertTitle>Action required</AlertTitle>
  <AlertDescription>
    Verify your billing email before continuing.
  </AlertDescription>
</Alert>

Tips

Keep alert copy short and action-oriented.
Use AlertTitle for the main message and AlertDescription for supporting context.
Prefer light-* variants in dense UIs to reduce visual noise.
Reserve destructive or heavy-error for blocking or high-risk feedback.

API Reference

`<Alert>` Props

Prop	Type	Default	Description
`variant`	`"default" \| "destructive" \| "success" \| "warning" \| "primary-success" \| "primary-warning" \| "primary-info" \| "primary-error" \| "soft-success" \| "soft-warning" \| "soft-info" \| "soft-error" \| "heavy-success" \| "heavy-warning" \| "heavy-info" \| "heavy-error" \| "light-success" \| "light-warning" \| "light-info" \| "light-error" \| "outline-success" \| "outline-warning" \| "outline-info" \| "outline-error"`	`"default"`	Visual style variant
`outlined`	`boolean`	`true`	Toggle border rendering
`className`	`string`	—	Custom class for alert container
`children`	`ReactNode`	—	Alert content

`<AlertIcon>` Props

Prop	Type	Description
`className`	`string`	Custom icon wrapper class
`children`	`ReactNode`	Icon/text content

`<AlertTitle>` and `<AlertDescription>`

Both accept standard HTML attributes and className for typography/layout overrides.

Collapsible Toast