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.

Default Alert

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.

Primary Alert

Secondary Alert

Success Alert

Warning Alert

Error Alert

Alert With Background Color#

Switch the background color of alerts using the withBg={true} prop. By default, withBg is set to false.

Primary Alert

Secondary Alert

Success Alert

Warning Alert

Error Alert

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.

Alert here

API Reference#

Explore the available props for the Alert component

PropertyDescriptionTypeDefault
colorThe color variant of the alert.
primary
secondary
success
warning
error
primary
dismissEnables or disables the dismiss icon.booleanfalse
withBgEnables background color.booleanfalse