Alert

A contextual feedback message. Built with DaisyUI's alert class on a <div role="alert">. Supports four semantic colors, three visual variants, an optional SVG icon slot, and vertical stacking.

Default

No color prop — neutral base style.

Colors

Four semantic color tokens: info, success, warning, error.

Without icon

The icon slot is optional — omit it for a text-only alert.

Soft variant

variant="soft" uses a muted background tint — less visually heavy than the default filled style.

Outline variant

variant="outline" — transparent background with a colored border.

Dash variant

variant="dash" — left border accent only.

Vertical

vertical stacks the icon above the message content.

With action

Place a button inside the default slot alongside the message text.

Form validation

Real-world usage: a top-of-form error summary.