Alert

Stable

User feedback and messaging component following DaisyUI alert patterns with icons and dismissible functionality.

API Reference

Attribute	Description	Type	Default
`color`	Alert color theme	string	`""`
`variant`	Alert style variant	string	`"default"`
`title`	Alert title text	string	`""`
`icon`	Custom Lucide icon name	string	`""`
`show_icon`	Shows the default icon for the alert color (info, success, warning, error)	boolean	`False`
`dismissible`	Adds a close button to dismiss the alert	boolean	`False`

color

info success warning error

variant

outline dash soft

Role: alerts use role="alert" implicitly through DaisyUI's .alert class. For live announcements add aria-live="polite" (or "assertive" for critical errors).

Dismissible: the close button renders as a <button type="button"> and is keyboard-focusable. After dismissal, move focus to a relevant element so keyboard users are not left stranded.

Colour alone: never rely on colour alone to convey meaning. Always pair colour with descriptive text or an icon with an accessible label.

Examples

Usage


<c-alert color="info">New software update available.</c-alert>

Alert Types

New software update available.

Your purchase has been confirmed!

Warning: Invalid email address!

Error! Task failed successfully.

<c-alert color="info" show_icon>New software update available.</c-alert>
<c-alert color="success">Your purchase has been confirmed!</c-alert>
<c-alert color="warning">Warning: Invalid email address!</c-alert>
<c-alert color="error">Error! Task failed successfully.</c-alert>

Alerts with Titles

Information

This is an informational alert with a title. It provides additional context to the user.

Success!

Operation completed successfully. Your changes have been saved to the system.

Warning

Please review this information carefully before proceeding with the action.

Error Occurred

Something went wrong with your request. Please try again or contact support.

<c-alert color="info" title="Information">
  This is an informational alert with a title.
</c-alert>

Alert Variants

Default info alert with standard styling.

Outline success alert with border styling.

Dashed warning alert with dashed border.

Soft error alert with subtle background.

<c-alert color="info" variant="default" show_icon>Default info alert.</c-alert>
<c-alert color="success" variant="outline" show_icon>Outline success alert.</c-alert>
<c-alert color="warning" variant="dash" show_icon>Dashed warning alert.</c-alert>
<c-alert color="error" variant="soft" show_icon>Soft error alert.</c-alert>

Custom Icons

Notification

You have a new notification with a custom bell icon.

Favorite

Item added to favorites with a heart icon.

Security

Account security warning with a lock icon.

Connection Lost

Network connection lost with a wifi-off icon.

<c-alert color="info" icon="bell" title="Notification">
  You have a new notification with a custom bell icon.
</c-alert>

<c-alert color="success" icon="heart" title="Favorite">
  Item added to favorites with a heart icon.
</c-alert>

Combined Features

Dismissible Outline

This alert combines outline variant, custom icon, title, and dismissible functionality.

Soft Success

Soft variant success alert with default icon, title, and dismiss button.

Dashed warning with custom icon and dismissible functionality (no title).

<c-alert color="info" variant="outline" icon="bell" title="Dismissible Outline" dismissible>
  This alert combines outline variant, custom icon, title, and dismissible functionality.
</c-alert>

<c-alert color="success" variant="soft" show_icon title="Soft Success" dismissible>
  Soft variant success alert with default icon, title, and dismiss button.
</c-alert>