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 elementtitle: The title elementdescription: The description elementmainWrapper: The wrapper for the title and description contentcloseButton: The close button elementiconWrapper: The wrapper for the alert iconalertIcon: 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
| Attribute | Type | Description | Default |
|---|---|---|---|
| title | string | The alert title | - |
| icon | ReactNode | The alert icon - overrides the default icon | - |
| description | ReactNode | The alert description | - |
| color | default | primary | secondary | success | warning | danger | The alert color theme | default |
| variant | solid | bordered | flat | faded | The alert variant | flat |
| radius | none | sm | md | lg | full | The alert border radius | md |
| startContent | ReactNode | The alert start content | - |
| endContent | ReactNode | The alert end content | - |
| isVisible | boolean | Whether the alert is visible | - |
| isClosable | boolean | Whether the alert can be closed | false |
| hideIcon | boolean | Whether the icon is hidden | false |
| hideIconWrapper | boolean | Whether the icon wrapper is hidden | false |
| closeButtonProps | ButtonProps | Props for the close button | - |
Alert Events
| Attribute | Type | Description |
|---|---|---|
| onClose | () => void | Handler called when the close button is clicked |
| onVisibleChange | (isVisible: boolean) => void | Handler called when the alert visibility changes |
