Alert
Alerts are used to display notifications or other important messages inline.
<dui-alert>
<dui-icon name="circle-check"/>
<dui-alert-title>Booking Confirmed</dui-alert-title>
<dui-alert-description>
<p>Your trip to Paris has been successfully booked. Check your email for your e-tickets and itinerary.</p>
</dui-alert-description>
<dui-alert-action>
<dui-button size="ButtonSize.ExtraSmall" variant="ButtonVariant.Outline">
<dui-icon name="tickets-plane"/>
View Tickets
</dui-button>
</dui-alert-action>
</dui-alert>Usage
The Alert Tag Helper can be used in either composition mode or shorthand mode. The composition mode is useful when the title or description contains HTML markup or additional HTML elements. It also allows you to add additional HTML attributes to the individual components of the alert - such as additional CSS class names via the class attribute.
<dui-alert>
<!-- Add an optional icon -->
<dui-icon name="..."/>
<dui-alert-title>
<!-- Add the title of the alert -->
</dui-alert-title>
<dui-alert-description>
<!-- Add the description of the alert -->
</dui-alert-description>
<dui-alert-actions>
<!-- Add actions the user can take -->
</dui-alert-actions>
</dui-alert>If you just want a simple alert with a plain text description and perhaps a title and icon, the shorthand mode allows for more compact markup.
<dui-alert icon="..." title="..." description="..."/>Examples
Basic
<div class="mx-auto flex w-full max-w-lg flex-col gap-4">
<dui-alert>
<dui-alert-title>Success! Your changes have been saved.</dui-alert-title>
</dui-alert>
<dui-alert>
<dui-alert-title>Success! Your changes have been saved.</dui-alert-title>
<dui-alert-description>
This is an alert with title and description.
</dui-alert-description>
</dui-alert>
<dui-alert>
<dui-alert-description>
This one has a description only. No title. No icon.
</dui-alert-description>
</dui-alert>
</div>Shorthand
<dui-alert
icon="badge-check"
title="Success! Your changes have been saved."
description="This is an alert with title and description."
/>Icons
Add an icon to your alert for additional information.
<div class="mx-auto flex w-full max-w-lg flex-col gap-4">
<dui-alert>
<dui-icon name="circle-alert"/>
<dui-alert-title>
Let's try one with icon, title and a <a href="#">link</a>.
</dui-alert-title>
</dui-alert>
<dui-alert>
<dui-icon name="circle-alert"/>
<dui-alert-description>
This one has an icon and a description only. No title. <a href="#">But it has a link</a> and a <a href="#">second
link</a>.
</dui-alert-description>
</dui-alert>
<dui-alert>
<dui-icon name="circle-alert"/>
<dui-alert-title>Success! Your changes have been saved</dui-alert-title>
<dui-alert-description>
This is an alert with icon, title and description.
</dui-alert-description>
</dui-alert>
<dui-alert>
<dui-icon name="circle-alert"/>
<dui-alert-title>
This is a very long alert title that demonstrates how the component
handles extended text content and potentially wraps across multiple
lines
</dui-alert-title>
</dui-alert>
<dui-alert>
<dui-icon name="circle-alert"/>
<dui-alert-description>
This is a very long alert description that demonstrates how the
component handles extended text content and potentially wraps across
multiple lines
</dui-alert-description>
</dui-alert>
<dui-alert>
<dui-icon name="circle-alert"/>
<dui-alert-title>
This is an extremely long alert title that spans multiple lines to
demonstrate how the component handles very lengthy headings while
maintaining readability and proper text wrapping behavior
</dui-alert-title>
<dui-alert-description>
This is an equally long description that contains detailed
information about the alert. It shows how the component can
accommodate extensive content while preserving proper spacing,
alignment, and readability across different screen sizes and
viewport widths. This helps ensure the user experience remains
consistent regardless of the content length.
</dui-alert-description>
</dui-alert>
</div>Destructive
Add custom CSS classes to restyle any of the Alert components.
<div class="mx-auto flex w-full max-w-lg flex-col gap-4">
<dui-alert variant="AlertVariant.Destructive">
<dui-icon name="circle-alert"/>
<dui-alert-title>Something went wrong!</dui-alert-title>
<dui-alert-description>
Your session has expired. Please log in again.
</dui-alert-description>
</dui-alert>
<dui-alert variant="AlertVariant.Destructive">
<dui-icon name="circle-alert"/>
<dui-alert-title>Unable to process your payment.</dui-alert-title>
<dui-alert-description>
<p>
Please verify your <a href="#">billing information</a> and try
again.
</p>
<ul class="list-inside list-disc">
<li>Check your card details</li>
<li>Ensure sufficient funds</li>
<li>Verify billing address</li>
</ul>
</dui-alert-description>
</dui-alert>
</div>Actions
You can add additional content such as buttons to the alert.
<div class="mx-auto flex w-full max-w-lg flex-col gap-4">
<dui-alert>
<dui-icon name="circle-alert"/>
<dui-alert-title>The selected emails have been marked as spam.</dui-alert-title>
<dui-alert-action>
<dui-button size="ButtonSize.ExtraSmall">Undo</dui-button>
</dui-alert-action>
</dui-alert>
<dui-alert>
<dui-icon name="circle-alert"/>
<dui-alert-title>The selected emails have been marked as spam.</dui-alert-title>
<dui-alert-description>
This is a very long alert title that demonstrates how the component
handles extended text content.
</dui-alert-description>
<dui-alert-action>
<dui-badge variant="BadgeVariant.Secondary">Badge</dui-badge>
</dui-alert-action>
</dui-alert>
</div>