Alert
A semantic role="alert" notice box. Supports all standard color variants and accepts an optional icon and title.
Variants
variant="light"
variant="filled"
variant="outline"
variant="transparent"
variant="white"
variant="default"
<Alert variant="light" title="Light">...</Alert>
<Alert variant="filled" title="Filled">...</Alert>
<Alert variant="outline" title="Outline">...</Alert>
<Alert variant="transparent" title="Transparent">...</Alert>
<Alert variant="default" title="Default">...</Alert>Color
Info
Warning
Success
Error
<Alert color="blue" title="Info" icon={<InfoIcon />}>
This is an informational alert.
</Alert>
<Alert color="yellow" title="Warning" icon={<WarningIcon />}>
Please review before continuing.
</Alert>
<Alert color="green" title="Success" icon={<CheckIcon />}>
Your changes have been saved.
</Alert>
<Alert color="red" title="Error" icon={<WarningIcon />}>
Something went wrong.
</Alert>Without title
<Alert color="blue" icon={<InfoIcon />}>
Alert without a title.
</Alert>
<Alert color="violet">
Message only — no icon or title.
</Alert>Radius
radius="xs"
radius="xl"
<Alert radius="xs" color="violet" title="Sharp">...</Alert>
<Alert radius="xl" color="violet" title="Rounded">...</Alert>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'light'|'filled'|'outline'|'transparent'|'white'|'default' | 'light' | Visual style variant |
color | UiColor | — | Theme color applied per variant |
radius | 'xs'|'sm'|'md'|'lg'|'xl'|string | — | Corner radius |
title | children | — | Heading shown above the message |
icon | children | — | Icon element rendered to the left |
withCloseButton | boolean | — | Reserves space for a close button (visual only) |