Alert

Displays a short, important message to attract the user's attention.

Default

The default alert is filled with the primary color.

A simple primary alert with important information.

tsx

import { Alert } from "@hummingbirdui/react";

export default function AlertDefault() {
  return <Alert>A simple primary alert with important information.</Alert>;
}

Variants

The variant prop changes the visual style: filled (default), subtle, or outline.

A filled alert.

A subtle alert.

An outline alert.

tsx

import { Alert } from "@hummingbirdui/react";

export default function AlertVariants() {
  return (
    <div className="flex flex-col gap-3">
      <Alert variant="filled">A filled alert.</Alert>
      <Alert variant="subtle">A subtle alert.</Alert>
      <Alert variant="outline">An outline alert.</Alert>
    </div>
  );
}

Colors

The color prop conveys intent with primary (default), neutral, secondary, info, success, warning, or danger.

A neutral alert.

A primary alert.

A secondary alert.

An info alert.

A success alert.

A warning alert.

A danger alert.

tsx

import { Alert } from "@hummingbirdui/react";

export default function AlertColors() {
  return (
    <div className="flex flex-col gap-3">
      <Alert color="neutral">A neutral alert.</Alert>
      <Alert color="primary">A primary alert.</Alert>
      <Alert color="secondary">A secondary alert.</Alert>
      <Alert color="info">An info alert.</Alert>
      <Alert color="success">A success alert.</Alert>
      <Alert color="warning">A warning alert.</Alert>
      <Alert color="danger">A danger alert.</Alert>
    </div>
  );
}

With icon

AlertIcon renders a leading icon.

Your changes have been saved successfully.

tsx

import { Alert, AlertIcon } from "@hummingbirdui/react";
import { CircleCheck } from "lucide-react";

export default function AlertWithIcon() {
  return (
    <Alert color="success">
      <AlertIcon>
        <CircleCheck className="size-5" />
      </AlertIcon>
      Your changes have been saved successfully.
    </Alert>
  );
}

API Reference

Alert

Prop	Type	Default	Description
variant	`"filled" \| "subtle" \| "outline"`	`"filled"`	Visual style of the alert.
color	`"neutral" \| "primary" \| "secondary" \| "info" \| "success" \| "warning" \| "danger"`	`"primary"`	Color theme of the alert.
asChild	`boolean`	`false`	Render as a child element instead of the default.
className	`string`	—	Additional classes merged with the generated classes.

AlertIcon

Prop	Type	Default	Description
asChild	`boolean`	`false`	Render as a child element instead of the default.
className	`string`	—	Additional classes merged with the generated classes.

Styling

Hummingbird React alert is styled entirely through Hummingbird's utility classes and CSS variables.

See the full list of available alert classes in the Class overview.
Visit the CSS Variables documentation to explore all available variables.

PreviousAccordion NextAvatar