Alert
Aria
RTL
A way of informing the user of important changes in a prominent way.
Anatomy
<Alert> <Alert.Title>...</Alert.Title> <Alert.Message>...</Alert.Message> <Alert.Close /> </Alert>
Default
Default alert
With title
Alert title
Alert message
With icon
Alert with icon
Alert with title and icon
Alert message
With close
Alert with close
Alert with title and close
Alert message
With icon and close
Alert with icon
Alert with title and icon
Alert message
Handle close
Click the Close button to hide the Alert
Customization
Generic style with coloured icon
Outline style
Colourful style
Alert props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | No | - | Id attribute for DOM element |
| class | css_class | No | - | Tailwind classes for customization |
| testid | string | No | - | Data-testid attribute for DOM element |
| default | slot | No | - | Defult content of Alert item |
| title | slot | No | - | Title of Alert item, see Alert.Title |
| message | slot | No | - | Message of Alert item, see Alert.Message |
| close | slot | No | - | Close button slot of Alert item, see Alert.Close |
Alert.Title props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | No | - | Id attribute for DOM element |
| class | css_class | No | - | Tailwind classes for customization |
| testid | string | No | - | Data-testid attribute for DOM element |
| default | slot | No | - | Title of Alert item |
Alert.Message props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | No | - | Id attribute for DOM element |
| class | css_class | No | - | Tailwind classes for customization |
| testid | string | No | - | Data-testid attribute for DOM element |
| default | slot | No | - | Message of Alert item |
Alert.Close props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | No | - | Id attribute for DOM element |
| class | css_class | No | - | Tailwind classes for customization |
| testid | string | No | - | Data-testid attribute for DOM element |
| on_click | event | No | - | Event to happen when close button is clicked |