Components
Alert
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.
tvpolymorphicrecursive-clone-children
Usage
import * as Alert from "@/components/ui/alert"
<Alert.Root variant="filled" status="error">
<Alert.Icon as={RiErrorWarningFill} />
Insert your alert title here!
</Alert.Root>
Examples
Filled
Filled variant alerts in all status colors with icon, link, and close button.
Insert your alert title here!
Insert your alert title here!
Insert your alert title here!
Insert your alert title here!
Insert your alert title here!
<Alert.Root variant="filled" status="error">
<Alert.Icon as={RiErrorWarningFill} />
Alert title
</Alert.Root>
Light
Light variant alerts in all status colors.
Insert your alert title here!
Insert your alert title here!
Insert your alert title here!
Insert your alert title here!
Insert your alert title here!
<Alert.Root variant="light" status="warning">
<Alert.Icon as={RiAlertFill} />
Alert title
</Alert.Root>
Lighter
Lighter variant alerts in all status colors.
Insert your alert title here!
Insert your alert title here!
Insert your alert title here!
Insert your alert title here!
Insert your alert title here!
<Alert.Root variant="lighter" status="success">
<Alert.Icon as={RiCheckboxCircleFill} />
Alert title
</Alert.Root>
Stroke
Stroke variant alerts in all status colors with outline border.
Insert your alert title here!
Insert your alert title here!
Insert your alert title here!
Insert your alert title here!
Insert your alert title here!
<Alert.Root variant="stroke" status="information">
<Alert.Icon as={RiInformationFill} />
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 as={RiErrorWarningFill} />
Alert title
</Alert.Root>
<Alert.Root variant="light" status="warning" size="small">
<Alert.Icon as={RiAlertFill} />
Alert title
</Alert.Root>
<Alert.Root variant="lighter" status="success" size="large">
<Alert.Icon as={RiCheckboxCircleFill} />
<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 polymorphic status icon.
| Prop | Type | Default | Description |
|---|---|---|---|
as | React.ElementType | - | The icon component to render |
Alert.CloseIcon
Renders a close/dismiss icon. Defaults to RiCloseLine.
| Prop | Type | Default | Description |
|---|---|---|---|
as | React.ElementType | - | Override the default close icon component |