Alert
A message bar component used to display important information or feedback for actions.
Alert Types
The Alert supports various types: 'info' (default), 'success', 'warning', 'error', 'loading', 'normal', 'sakura' and 'notice'.
Alert Variants
The Alert has two style variants: 'plain' (default) and 'primary'.
Text Alignment
Set textAlign to control the alignment of the content: 'start', 'center', or 'end'.
Title
Use the title prop or title slot to show a prominent title above the content.
Closable
Enable closable to show a close icon; the component emits a close event when the icon is clicked.
Icon
Set the icon position via iconPlacement: 'start' or 'text-leading'; control icon visibility via showIcon; customize the icon via the icon slot.
Custom Color
Set color to provide a custom primary color: the component generates a complete palette from it and the palette will take precedence over preset theme palettes. See Supported Color Parsing.
Shape & Rounded Corner Border
Control the shape of the Alert component via shape.
borderRadius sets the Alert's rounded corners and takes precedence over shape, behavior follows CSS border-radius rules.
- Single value or array length 1 → applies to all corners
- Array length 2 → [top-left & bottom-right, top-right & bottom-left]
- Array length 3 → [top-left, top-right & bottom-left, bottom-right]
- Array length 4 → applies clockwise from top-left
API
AlertProps
| Attribute | Type | Optional | Default | Description | Version |
|---|---|---|---|---|---|
| borderRadius | NumberOrPercentage | NumberOrPercentage[] | True | | Corner radius, takes precedence over shape and behaves like CSS border-radius. | 0.1.0 |
| shape | 'rect' | 'round' | True | 'rect' | Component shape, 'rect' or 'round'. | 0.1.0 |
| variant | 'primary' | 'plain' | True | 'plain' | Style variant, 'primary' or 'plain'. | 0.1.0 |
| type | 'info' | 'success' | 'warning' | 'error' | 'loading' | 'normal' | 'sakura' | 'notice' | True | 'primary' | Type (theme). | 0.1.0 |
| textAlign | 'start' | 'center' | 'end' | True | 'start' | Text alignment, 'start' / 'center' / 'end'. | 0.1.0 |
| title | string | True | | Title text or provided via title slot. | 0.1.0 |
| color | string | True | | Custom primary color. See Supported Color Parsing. | 0.1.0 |
| closable | boolean | True | false | Whether to show close icon. | 0.1.0 |
| iconPlacement | 'start' | 'text-leading' | True | 'text-leading' | Icon placement, 'start' or 'text-leading'. | 0.1.0 |
| showIcon | boolean | True | 'true' | Whether to show icon. | 0.1.0 |
| pollSizeChange | boolean | True | false | Enable polling for size changes (may impact performance). | 0.1.0 |
AlertEvents
| Event | Parameter | Description | Version |
|---|---|---|---|
| close | e: MouseEvent | Emitted when close icon is clicked, callback receives MouseEvent. | 0.1.0 |
AlertSlots
| Slot | Parameter | Description | Version |
|---|---|---|---|
| default | | Default content slot. | 0.1.0 |
| title | | Title slot. | 0.1.0 |
| icon | | Icon slot. | 0.1.0 |
NumberOrPercentage
export type NumberOrPercentage = number | `${number}%`