Alert
Displays important messages or feedback with customizable color, size, style, and appearance to fit various use cases.
Variants
This is solid variant.
This is solid variant.
This is solid variant.
Sizes
This is a small Alert.
This is a medium Alert.
This is a large Alert.
This is a extra-large Alert.
Shadows
This is a small-shadow Alert.
This is a medium-shadow Alert.
This is a large-shadow Alert.
This is a xl-shadow Alert.
Radius
This is a small-radius Alert.
This is a medium-radius Alert.
This is a large-radius Alert.
This is a xl-radius Alert.
Features
- Supports five visual variants:
solid,flat,bordered, andfaded - Multiple color themes including
primary,success,warning,danger, andsecondary - Customizable size, border radius, and shadow depth
- Fully responsive and easy to integrate
- Accepts any valid React node as content
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | – | The content to be displayed inside the alert. |
| className | string | – | Additional CSS classes for custom styling. |
| color | 'success' | 'warning' | 'danger' | 'secondary' | 'primary' | – | Sets the color theme of the alert. |
| rounded | 'sm' | 'md' | 'lg' | 'xl' | 'full' | – | Controls the border radius of the alert. |
| shadow | 'sm' | 'md' | 'lg' | 'xl' | – | Applies shadow depth to the alert. |
| size | 'sm' | 'md' | 'lg' | 'xl' | – | Sets the overall size of the alert. |
| variant | 'solid' | 'flat' | 'bordered' | 'faded' | – | Defines the visual style of the alert. |