Alert - Keep React
Table of Contents#
- Default Alert
- Dismissible Alerts
- Softly Rounded Alerts
- Accented Border Alerts
- Color Variants of Alerts
- API Reference
Default Alert#
The Default Alert is a clean and simple design, ideal for conveying straightforward notifications without any elaborate visuals.
Dismissible Alerts#
For alerts that users can close, the Dismiss Icon comes in handy. Pass a handler function to the onDismiss prop to enable this feature.
Softly Rounded Alerts#
If you prefer a more approachable appearance, the Rounded Alert is a great option. By setting the rounded prop to true, the alert corners become rounded, giving it a friendly touch.
Accented Border Alerts#
To make alerts stand out, you can add a border using the withBorder prop set to true. For an elegant accent, use the withBorderAccent prop. By default, the accent appears on the left, but you can customize its position using withBorderAccentPosition="left"|"right"|"top"|"bottom".
Color Variants of Alerts#
Colors can convey the nature of alerts. While the default color is info, you can choose from success, warning, error, gray, or info. Simply set the color prop accordingly.
API Reference#
Explore the available props for the Alert component
| Property | Description | Type | Default |
|---|---|---|---|
| color | The color variant of the alert. | info gray success warning error | info |
| icon | Custom icon to be displayed in the alert. | ReactNode | <Info/> |
| dismiss | Enables or disables the dismiss icon. | boolean | false |
| onDismiss | Handler function to be called when the dismiss icon is clicked. | function | () => void |
| rounded | Adds rounded corners to the alert. | boolean | false |
| title | Alert title to be displayed in the alert. | string | Default message... |
| withBorder | Adds a border around the alert. | boolean | false |
| withBorderAccent | Adds a border accent to the alert. | boolean | false |
| withBorderAccentPosition | Specifies the position of the border accent. | left right top bottom | left |