Alert

Alerts are temporary notifications that provide concise feedback about an action or event.

Installation

npx nextui-cli@latest add alert

The above command is for individual installation only. You may skip this step if @nextui-org/react is already installed globally.

Import

Usage

• It accepts title and description as props for the alert message.
• title is an optional property.

Radius

Colors

isClosable

If isClosable is true, a close button appears on the alert, which can be used to close it.

Note: If the onClose is passed, the close button is visible regardless of the isClosable property.

Slots

• base: Alert wrapper, it handles alignment, placement, and general appearance.
• mainWrapper: Wraps the title and description of the alert.
• closeButton: The closeButton, it is in the top-right corner of alert.
• description: The description of the alert.
• title: The title of the alert.
• closeIcon: The close icon that is wrapped inside the closeButton.
• alertIcon: icon that appears at the top-left corner.

Custom Alert Styles

You can customize the alert styles by using the classNames property.

Here's an example of how to customize the alert styles:

Custom Implementation

In case you need to customize the alert even further, you can use the useAlert hook to create your own implementation.

API

Alert Props

Alert Events