Alert - Keep React
Table of Contents#
- Default Alert
- Color Variants of Alerts
- Alert With Background Color
- Alert With Card
- Dismissible Alerts
- API Reference
- Dismiss Button API Reference
Default Alert#
The Default Alert is a clean and simple design, ideal for conveying straightforward notifications without any elaborate visuals.
Color Variants of Alerts#
Colors can convey the nature of alerts. While the default color is primary, you can choose from secondary, success, warning, or error. Simply set the color prop accordingly.
Alert With Background Color#
Switch the background color of alerts using the withBg={true} prop. By default, withBg is set to false.
Alert With Card#
Display the alert message with a card view, and access all the available props for customization.
Dismissible Alerts#
Dismiss alert messages by using the dismiss prop. The default behavior is server-side rendering. If you want to use a click event handler, set the alert as a client-side component.
API Reference#
Explore the available props for the Alert component
| Property | Description | Type | Default |
|---|---|---|---|
| color | The color variant of the alert. | primary secondary success warning error | primary |
| dismiss | Enables or disables the dismiss icon. | boolean | false |
| withBg | Enables background color. | boolean | false |
| className | Injects the class name | string | None |
Dismiss Button API Reference#
Explore the available props for the <Alert.Dismiss/> component
| Property | Description | Type | Default |
|---|---|---|---|
| onClick | Handler function to be called when the dismiss icon is clicked. | function | () => void |
| className | Injects the class name | string | None |