Feedback
Contextual feedback message with icon, title, description, and dismiss.
11 props across 4 groups
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | — | Alert title. |
description | ReactNode | — | Alert body content. |
icon | ReactNode | — | Overrides the default color-derived status icon. |
startContent | ReactNode | — | Content rendered before the title/description block. |
endContent | ReactNode | — | Content rendered after the title/description block. |
actions | ReactNode | — | Action buttons rendered below the description. |
title
ReactNode
Default: —
Alert title.
description
ReactNode
Default: —
Alert body content.
icon
ReactNode
Default: —
Overrides the default color-derived status icon.
startContent
ReactNode
Default: —
Content rendered before the title/description block.
endContent
ReactNode
Default: —
Content rendered after the title/description block.
actions
ReactNode
Default: —
Action buttons rendered below the description.
| Prop | Type | Default | Description |
|---|---|---|---|
color | "default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | default | Semantic color, also picks the default status icon. |
variant | "solid" | "soft" | "bordered" | solid | Visual style variant. |
shadow | "none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | none | Box-shadow depth. |
radius | "none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | "full" | md | Border radius. |
size | "xs" | "xs-sm" | "sm" | "md" | "lg" | "xl" | md | Alert size. |
color
"default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger"
Default: default
Semantic color, also picks the default status icon.
variant
"solid" | "soft" | "bordered"
Default: solid
Visual style variant.
shadow
"none" | "xs" | "xs-sm" | "sm" | "md" | "lg"
Default: none
Box-shadow depth.
radius
"none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | "full"
Default: md
Border radius.
size
"xs" | "xs-sm" | "sm" | "md" | "lg" | "xl"
Default: md
Alert size.
| Prop | Type | Default | Description |
|---|---|---|---|
isVisible | boolean | — | Controlled visibility; uncontrolled defaults visible. |
isClosable | boolean | false | Shows a close button. |
hideIcon | boolean | false | Hides the status icon entirely. |
hideIconWrapper | boolean | false | Hides the icon's background wrapper, keeping the icon itself. |
closeButtonProps | Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> | — | Extra props forwarded to the close button. |
isVisible
boolean
Default: —
Controlled visibility; uncontrolled defaults visible.
isClosable
boolean
Default: false
Shows a close button.
hideIcon
boolean
Default: false
Hides the status icon entirely.
hideIconWrapper
boolean
Default: false
Hides the icon's background wrapper, keeping the icon itself.
closeButtonProps
Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type">
Default: —
Extra props forwarded to the close button.
| Prop | Type | Default | Description |
|---|---|---|---|
disableAnimation | boolean | false | Disables the enter/exit animation. |
disableAnimation
boolean
Default: false
Disables the enter/exit animation.
| Prop | Type | Default | Description |
|---|---|---|---|
onClose | () => void | — | Called when the close button is pressed. |
onVisibleChange | (isVisible: boolean) => void | — | Called whenever visibility changes. |
onClose
() => void
Default: —
Called when the close button is pressed.
onVisibleChange
(isVisible: boolean) => void
Default: —
Called whenever visibility changes.
| Prop | Type | Default | Description |
|---|---|---|---|
classNames | Partial<Record<AlertSlot, string>> | — | Per-slot class overrides. |
className | string | — | Class applied to the root element. |
style | CSSProperties | — | Inline styles for the root element. |
classNames
Partial<Record<AlertSlot, string>>
Default: —
Per-slot class overrides.
className
string
Default: —
Class applied to the root element.
style
CSSProperties
Default: —
Inline styles for the root element.
