Alert - Keep React
Table of Contents#
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.
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 |