Alert - HapplyUI

A versatile alert component with multiple variants, status colors, and sizes for user notifications.

Installation

bunx @happlyui/cli@latest add alert

Dependencies

npm packages

@remixicon/react

Registry dependencies

These are automatically installed when you add this component.

tv
polymorphic
recursive-clone-children

Usage

import * as Alert from "@/components/ui/alert"

<Alert.Root variant="filled" status="error">
  <Alert.Icon />
  Insert your alert title here!
</Alert.Root>

Examples

Default Icons

Each status automatically renders a matching icon: error (RiErrorWarningFill), warning (RiAlertFill), success (RiCheckboxCircleFill), information (RiInformationFill), feature (RiSparklingFill). No `as` prop needed.

Error alert with default icon

Warning alert with default icon

Success alert with default icon

Information alert with default icon

Feature alert with default icon

<Alert.Root variant="light" status="error">
  <Alert.Icon />
  Error alert
</Alert.Root>

<Alert.Root variant="light" status="success">
  <Alert.Icon />
  Success alert
</Alert.Root>

Custom Icon

Override the default icon using the `as` prop.

Feature alert with custom icon override

<Alert.Root variant="light" status="feature">
  <Alert.Icon as={RiMagicFill} />
  Feature alert with custom icon
</Alert.Root>

Filled

Filled variant alerts in all status colors with icon, link, and close button.

Insert your alert title here!

<Alert.Root variant="filled" status="error">
  <Alert.Icon />
  Alert title
</Alert.Root>

Light

Light variant alerts in all status colors.

Insert your alert title here!

<Alert.Root variant="light" status="warning">
  <Alert.Icon />
  Alert title
</Alert.Root>

Lighter

Lighter variant alerts in all status colors.

Insert your alert title here!

<Alert.Root variant="lighter" status="success">
  <Alert.Icon />
  Alert title
</Alert.Root>

Stroke

Stroke variant alerts in all status colors with outline border.

Insert your alert title here!

<Alert.Root variant="stroke" status="information">
  <Alert.Icon />
  Alert title
</Alert.Root>

Sizes

Alerts come in three sizes: xsmall, small (default), and large. The large size supports title, description, and action links.

XSmall

Insert your alert title here!

Small (default)

Insert your alert title here!

Large

Insert your alert title here!

Insert the alert description here. It would look better as two lines of text.

∙

<Alert.Root variant="filled" status="error" size="xsmall">
  <Alert.Icon />
  Alert title
</Alert.Root>

<Alert.Root variant="light" status="warning" size="small">
  <Alert.Icon />
  Alert title
</Alert.Root>

<Alert.Root variant="lighter" status="success" size="large">
  <Alert.Icon />
  <div>
    <div className="text-label-sm">Title</div>
    <div>Description</div>
  </div>
</Alert.Root>

API Reference

Alert.Root

The main alert container.

Prop	Type	Default	Description
`variant`	`'filled' \| 'light' \| 'lighter' \| 'stroke'`	`'filled'`	The visual variant of the alert
`status`	`'error' \| 'warning' \| 'success' \| 'information' \| 'feature'`	`'information'`	The semantic status color
`size`	`'xsmall' \| 'small' \| 'large'`	`'small'`	The size of the alert
`wrapperClassName`	`ClassValue`	-	Additional classes for the inner wrapper grid

Alert.Icon

Renders a status icon. Defaults to a matching icon per status (error → RiErrorWarningFill, warning → RiAlertFill, success → RiCheckboxCircleFill, information → RiInformationFill, feature → RiSparklingFill). Override with the `as` prop.

Prop	Type	Default	Description
`as`	`React.ElementType`	-	Override the default status icon with a custom icon component

Alert.CloseIcon

Renders a close/dismiss icon. Defaults to RiCloseLine.

Prop	Type	Default	Description
`as`	`React.ElementType`	-	Override the default close icon component