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 at the top-right corner of alert.
• description: The description of the alert.
• title: The title of the alert.
• closeIcon: close icon that is wrapped inside the closeButton.

Custom Styles

You can customize the Alert component by passing custom Tailwind CSS classes to the component slots.

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