Alert

Contextual feedback banner for success, warning, danger, or info.

Installation

npx dafink-ui add alert

Demo

Props

NameTypeDefaultDescription
variant'default' | 'success' | 'warning' | 'danger''default'Alert color and icon.
titlestringundefinedBold heading text.
childrenReactNodeundefinedBody content.
classNamestring''Additional CSS classes.

Accessibility

Alert's root has role="alert", so assistive technology announces its content as soon as it mounts; the variant icon is aria-hidden="true" and Alert has no keyboard behavior of its own. Only the success variant uses a visually distinct icon (a check-circle) — default, warning, and danger currently share the same triangle-alert icon path, so for those three the required title/body text is what keeps the state from depending on color alone.