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

Colors

Alert comes with 6 color variants to convey different meanings.

Variants

Radius

Custom Icon

By default, Alert displays an appropriate icon based on the color prop. You can override this by providing a custom icon using the icon prop.

Without Icon

You can hide the icon by setting the hideIcon prop to true.

With Action

Alert supports an endContent prop for additional actions.

Controlled Visibility

You can control the alert visibility using the isVisible and onVisibleChange props.

Custom Styles

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

Custom Implementation

You can use the useAlert hook to create your own alert component.

Data Attributes

Alert has the following attributes on the base element:

• data-visible: When the alert is visible
• data-closeable: When the alert can be closed
• data-has-title: When the alert has a title
• data-has-description: When the alert has a description

Slots

Alert has the following slots:

• base: The main alert container element
• title: The title element
• description: The description element
• mainWrapper: The wrapper for the title and description content
• closeButton: The close button element
• iconWrapper: The wrapper for the alert icon
• alertIcon: The alert icon element

Accessibility

• Alert has role of alert
• Close button has aria-label="Close" by default
• When closed, alert is removed from the DOM

API

Alert Props

Alert Events