Alert - Keep React

The Alert component in the Keep React allows you to display important messages, notifications, or warnings to users. With customizable options for style, close icon, border, and state, you can create visually appealing and informative alerts that align with your design requirements.

Table of Contents#

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

colorThe color variant of the alert.
iconCustom icon to be displayed in the alert.ReactNode<Info/>
dismissEnables or disables the dismiss icon.booleanfalse
onDismissHandler function to be called when the dismiss icon is clicked.function() => void
roundedAdds rounded corners to the alert.booleanfalse
titleAlert title to be displayed in the alert.stringDefault message...
withBorderAdds a border around the alert.booleanfalse
withBorderAccentAdds a border accent to the alert.booleanfalse
withBorderAccentPositionSpecifies the position of the border accent.
classNameInjects the class namestringNone
titleStyleInjects the class name in titlestringNone
iconStyleInjects the class name in iconstringNone