Components
Alert
Displays a callout for user attention, such as a success message, warning, or error.
Loading
Installation
pnpm dlx shadcn@latest add @toui/alert
Examples
Solid
Loading
Mono
Loading
Outline
Loading
Light
Loading
Size
Loading
Extended
Loading
Actions
Loading
Pattern
Tokens
18 CSS variables in 8 categories.
px
| CSS Variable | Value | Description |
|---|---|---|
--alert-px-sm | var(--component-px-md) | — |
--alert-px-md | var(--component-px-md) | — |
--alert-px-lg | var(--component-px-lg) | — |
py
| CSS Variable | Value | Description |
|---|---|---|
--alert-py-sm | 0.625rem | 10px |
--alert-py-md | 0.875rem | 14px |
--alert-py-lg | 1rem | 16px |
gap
| CSS Variable | Value | Description |
|---|---|---|
--alert-gap-sm | var(--component-gap-sm) | — |
--alert-gap-md | var(--component-gap-md) | — |
--alert-gap-lg | var(--component-gap-md) | — |
text
| CSS Variable | Value | Description |
|---|---|---|
--alert-text | inherit | Colour slot — set by variant |
icon-size
| CSS Variable | Value | Description |
|---|---|---|
--alert-icon-size-sm | 1rem | 16px |
--alert-icon-size-md | 1.25rem | 20px |
--alert-icon-size-lg | 1.5rem | 24px |
radius
| CSS Variable | Value | Description |
|---|---|---|
--alert-radius-sm | var(--component-radius-sm) | — |
--alert-radius-md | var(--component-radius-md) | — |
--alert-radius-lg | var(--component-radius-md) | — |
bg
| CSS Variable | Value | Description |
|---|---|---|
--alert-bg | transparent | Colour slot — set by variant |
border
| CSS Variable | Value | Description |
|---|---|---|
--alert-border | transparent | Colour slot — set by variant |
API Reference
The Alert component is a custom implementation that provides flexible and customizable alert messages. Here's the complete API reference:
Alert
The root Alert component includes the following props:
| Prop | Type | Default |
|---|---|---|
variant | ||
appearance | ||
size | ||
className | ||
close | ||
onClose |
AlertTitle
The AlertTitle component includes the following props:
| Prop | Type | Default |
|---|---|---|
asChild | ||
className |
AlertDescription
The AlertDescription component includes the following props:
| Prop | Type | Default |
|---|---|---|
asChild | ||
className |
AlertIcon
The AlertIcon component includes the following props:
| Prop | Type | Default |
|---|---|---|
variant | ||
className |
AlertContent
The AlertContent component includes the following props:
| Prop | Type | Default |
|---|---|---|
className |
AlertToolbar
The AlertToolbar component includes the following props:
| Prop | Type | Default |
|---|---|---|
variant | ||
className |
Credits
- Built with Radix UI Slot.