CataUiAlert
The Alert component is used to display important messages to the user. It supports various types (info, success, warning, error) and can be customized with icons and border styles.
Info label
Success label
Warning label
Error label
Examples
Basic Alerts
<CataUiAlert type="info" label="Info label" />
<CataUiAlert type="success" label="Success label" />
<CataUiAlert type="warning" label="Warning label" />
<CataUiAlert type="error" label="Error label" />
Alerts with Icons
<CataUiAlert type="info" label="Info with icon" icon="bi-info-circle" />
<CataUiAlert type="success" label="Success with icon" icon="bi-check-circle" />
<CataUiAlert type="warning" label="Warning with icon" icon="bi-exclamation-circle" />
<CataUiAlert type="error" label="Error with icon" icon="bi-exclamation-triangle" />
Closeable Alerts
<CataUiAlert type="info" label="Closeable alert" closeable />
<CataUiAlert type="error" label="Closeable alert with icon" icon="bi-exclamation-triangle" closeable />
Border Styles
<CataUiAlert type="info" label="Default rounded borders" />
<CataUiAlert type="info" label="Square borders" borders="square" />
Props
| Prop | Description | Type | Default | Required | Options |
|---|---|---|---|---|---|
| borders | Controls the border style of the alert | String | 'rounded' | false | 'rounded', 'square' |
| closeable | Displays a close button that emits a 'close' event when clicked | Boolean | false | false | true, false |
| icon | The class of the bootstrap icon with bi- prefix (see Icons) | String | '' | false | |
| label | The text label displayed in the alert | String | '' | false | |
| type | The alert type, which changes the coloring | String | 'info' | false | 'info', 'success', 'warning', 'error' |
Emits
| Event | Description | Parameters |
|---|---|---|
| close | Emitted when the close button is clicked | None |
Styling
The component's appearance changes based on the type property:
info: Blue coloring for informational messagessuccess: Green coloring for success messageswarning: Yellow/Amber coloring for warning messageserror: Red coloring for error messages
The component uses the following CSS variables for colors:
--color-info-rgb--color-success-rgb--color-warning-rgb--color-error-rgb
Accessibility
- The close button is properly styled as a button element for keyboard accessibility
- Icons provide additional visual cues along with text content