Alert

Displays a callout for user attention.

Code

import {
  Alert,
  AlertDescription,
  AlertTitle,
  CheckCircle2Icon,
  InfoIcon,
} from "@falcon/ui-kit";

export function Example() {
  return (
    <div className="tw:grid tw:w-full tw:max-w-md tw:items-start tw:gap-4">
      <Alert>
        <CheckCircle2Icon />
        <AlertTitle>Payment received</AlertTitle>
        <AlertDescription>
          Your payment of $4,250.00 has been applied to your account. A receipt
          has been sent to your email address.
        </AlertDescription>
      </Alert>
      <Alert>
        <InfoIcon />
        <AlertTitle>New pricing available</AlertTitle>
        <AlertDescription>
          We&apos;ve updated product pricing for the upcoming season. You can
          review it in the product catalog.
        </AlertDescription>
      </Alert>
    </div>
  );
}

Composition

Use the following composition to build an Alert:

Alert
├── Icon
├── AlertTitle
├── AlertDescription
└── AlertAction

Basic

A basic alert with an icon, title and description.

Code

import {
  Alert,
  AlertDescription,
  AlertTitle,
  CheckCircle2Icon,
} from "@falcon/ui-kit";

export function Example() {
  return (
    <Alert className="tw:max-w-md">
      <CheckCircle2Icon />
      <AlertTitle>Account updated successfully</AlertTitle>
      <AlertDescription>
        Your profile information has been saved. Changes will be reflected
        immediately.
      </AlertDescription>
    </Alert>
  );
}

Destructive

Use variant="destructive" to create a destructive alert.

Code

import {
  Alert,
  AlertCircleIcon,
  AlertDescription,
  AlertTitle,
} from "@falcon/ui-kit";

export function Example() {
  return (
    <Alert variant="destructive" className="tw:max-w-md">
      <AlertCircleIcon />
      <AlertTitle>Payment failed</AlertTitle>
      <AlertDescription>
        Your payment could not be processed. Please check your payment method
        and try again.
      </AlertDescription>
    </Alert>
  );
}

Action

Use AlertAction to add a button or other action element to the alert.

Code

import {
  Alert,
  AlertAction,
  AlertDescription,
  AlertTitle,
  Button,
} from "@falcon/ui-kit";

export function Example() {
  return (
    <Alert className="tw:max-w-md">
      <AlertTitle>New pricing is now available</AlertTitle>
      <AlertDescription>
        Review updated prices before creating your next order.
      </AlertDescription>
      <AlertAction>
        <Button size="xs" variant="default">
          Review
        </Button>
      </AlertAction>
    </Alert>
  );
}

API

Alert

Announces urgent status information. Renders a <div> element with role="alert" and accepts standard <div> props. Pass role="status" for nonurgent updates. Place an icon as a direct child.

Props

variant

variant?: "default" | "destructive" | null = "default"

The alert’s status treatment.

AlertAction

Contains an alert action. Renders a <div> element, accepts standard <div> props, and must be a direct child of Alert.

AlertDescription

Provides supporting detail for an alert. Renders a <div> element and accepts standard <div> props.

AlertTitle

Provides the alert’s title. Renders a <div> element and accepts standard <div> props.