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 |
|---|---|---|---|---|
| className | string | No | - | Tailwind classes for customization |
Alert.Title props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | string | React.ReactNode | No | - | Children content |
| className | string | No | - | Tailwind classes for customization |
Alert.Message props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | string | React.ReactNode | No | - | Children content |
| className | string | No | - | Tailwind classes for customization |