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
With 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.
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
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 | The alert variant | flat |
| radius | none | sm | md | lg | full | The alert border radius | md |
| isVisible | boolean | Whether the alert is visible | - |
| isClosable | boolean | Whether the alert can be closed | 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 |
