edbnedbn/ui
ComponentsMapsPDF
GitHub stars
Explorer
Get Started
Components

Alert

Inline status banners with default, destructive, success, warning, and info variants.

Components

Installation

npx shadcn@latest add https://ui.edbn.me/api/analytics/registry/alert.json

Manual

API Reference

Alert

Local inline status wrapper. Renders a div with role="alert" by default and accepts native div props.

Styling
variant'default' | 'destructive' | 'success' | 'warning' | 'info'
='default'

Local visual tone provided by this wrapper.

classNamestring

Additional classes merged after the variant classes with cn().

Accessibility
roleReact.AriaRole
='alert'

ARIA live-region role. Use 'status' for non-urgent updates.

Content
childrenReact.ReactNode

Alert content. Usually combines an optional icon, AlertTitle, and AlertDescription.

Refs
refReact.Ref<HTMLDivElement>

React 19 ref forwarded to the root div.

DOM
...propsReact.ComponentPropsWithRef<'div'>

All native div attributes, including id, style, aria-* and data-* attributes.

Alert data attributes
AttributeDescription
data-slot="alert"Stable slot marker on the root element for styling and testing.
Alert CSS variables
VariableDescription
--alert-toneTheme-aware tone color used to derive variant styling.
--alert-accentAccent color used by the optional icon treatment.
--alert-borderResolved border color for the active variant.
--alert-surfaceResolved background surface color for the active variant.
--alert-foregroundResolved title and root text color.
--alert-mutedResolved description text color.
--alert-mark-surfaceSolid surface behind a direct child icon.
--alert-code-surfaceSolid inline code background color.
--alert-code-borderInline code border color.

AlertTitle

Alert heading. Renders an h5 element and accepts native heading props.

Content
childrenReact.ReactNode

Heading content.

Styling
classNamestring

Additional classes merged with the default title styles.

Refs
refReact.Ref<HTMLHeadingElement>

React 19 ref forwarded to the h5 element.

DOM
...propsReact.ComponentPropsWithRef<'h5'>

All native h5 attributes.

AlertTitle data attributes
AttributeDescription
data-slot="alert-title"Stable slot marker on the title element for styling and testing.

AlertDescription

Alert body text. Renders a div element and accepts native div props.

Content
childrenReact.ReactNode

Description content, including paragraphs or inline text.

Styling
classNamestring

Additional classes merged with the default description styles.

Refs
refReact.Ref<HTMLDivElement>

React 19 ref forwarded to the description div.

DOM
...propsReact.ComponentPropsWithRef<'div'>

All native div attributes.

AlertDescription data attributes
AttributeDescription
data-slot="alert-description"Stable slot marker on the description element for styling and testing.