Alert
Alerts are used to display notifications or other important messages inline
<sa-alert>
<sa-icon name="circle-check"/>
<sa-alert-title>Booking Confirmed</sa-alert-title>
<sa-alert-description>
<p>Your trip to Paris has been successfully booked. Check your email for your e-tickets and itinerary.</p>
</sa-alert-description>
<sa-alert-action>
<sa-button size="ButtonSize.ExtraSmall" variant="ButtonVariant.Outline">
<sa-icon name="tickets-plane"/>
View Tickets
</sa-button>
</sa-alert-action>
</sa-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.
<sa-alert>
<!-- Add an optional icon -->
<sa-icon name="..."/>
<sa-alert-title>
<!-- Add the title of the alert -->
</sa-alert-title>
<sa-alert-description>
<!-- Add the description of the alert -->
</sa-alert-description>
<sa-alert-action>
<!-- Add actions the user can take -->
</sa-alert-action>
</sa-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.
<sa-alert icon="..." title="..." description="..."/>Examples
Basic
An alert can carry a title, a description, or both. The third alert has a description only.
<div class="mx-auto flex w-full max-w-lg flex-col gap-4">
<sa-alert>
<sa-alert-title>Your booking has been confirmed.</sa-alert-title>
</sa-alert>
<sa-alert>
<sa-alert-title>Your booking has been confirmed.</sa-alert-title>
<sa-alert-description>
A confirmation email with your e-tickets is on its way.
</sa-alert-description>
</sa-alert>
<sa-alert>
<sa-alert-description>
Passport details are required at least 72 hours before departure.
</sa-alert-description>
</sa-alert>
</div>Shorthand
For simple alerts, pass icon, title and description as attributes on a self-closing <sa-alert> instead of nesting child tags.
<sa-alert
icon="badge-check"
title="Your booking has been confirmed."
description="A confirmation email with your e-tickets is on its way."
/>
Icons
Add an icon to your alert for additional information.
<div class="mx-auto flex w-full max-w-lg flex-col gap-4">
<sa-alert>
<sa-icon name="circle-alert"/>
<sa-alert-title>
Online check-in opens 24 hours before departure. <a href="#">Check in now</a>.
</sa-alert-title>
</sa-alert>
<sa-alert>
<sa-icon name="circle-alert"/>
<sa-alert-description>
Your visa application is being processed. <a href="#">Track its status</a> or <a href="#">upload missing
documents</a>.
</sa-alert-description>
</sa-alert>
<sa-alert>
<sa-icon name="circle-alert"/>
<sa-alert-title>Your booking has been confirmed</sa-alert-title>
<sa-alert-description>
A confirmation email with your e-tickets is on its way.
</sa-alert-description>
</sa-alert>
<sa-alert>
<sa-icon name="circle-alert"/>
<sa-alert-title>
Your outbound flight VT 204 from Amsterdam to Marrakech on 12 March has
been rescheduled and will now depart forty minutes later than originally
planned
</sa-alert-title>
</sa-alert>
<sa-alert>
<sa-icon name="circle-alert"/>
<sa-alert-description>
Your outbound flight has been rescheduled. The new departure time is
09:40 and you now arrive in Marrakech at 13:05, so your airport transfer
has been moved accordingly
</sa-alert-description>
</sa-alert>
<sa-alert>
<sa-icon name="circle-alert"/>
<sa-alert-title>
Important changes to your Marrakech city break: your outbound flight has
been rescheduled, your riad has confirmed an early check-in, and your
guided walking tour has moved to the second morning
</sa-alert-title>
<sa-alert-description>
The airline has moved flight VT 204 to 09:40, which still connects
comfortably with your private transfer. Riad Dar Zitoune has confirmed
that your room will be ready from 11:00, so you can drop your bags
before lunch. Because of the later arrival, your guide has moved the
walking tour to the following morning at 09:00; the meeting point in
Jemaa el-Fnaa is unchanged. No action is needed from you, and your
itinerary has been updated to reflect all of these changes.
</sa-alert-description>
</sa-alert>
</div>Destructive
Set variant="AlertVariant.Destructive" for errors and other problems that need the user's attention.
<div class="mx-auto flex w-full max-w-lg flex-col gap-4">
<sa-alert variant="AlertVariant.Destructive">
<sa-icon name="circle-alert"/>
<sa-alert-title>Something went wrong!</sa-alert-title>
<sa-alert-description>
Your session has expired. Please log in again.
</sa-alert-description>
</sa-alert>
<sa-alert variant="AlertVariant.Destructive">
<sa-icon name="circle-alert"/>
<sa-alert-title>Unable to process your payment.</sa-alert-title>
<sa-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>
</sa-alert-description>
</sa-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">
<sa-alert>
<sa-icon name="circle-alert"/>
<sa-alert-title>The selected bookings have been archived.</sa-alert-title>
<sa-alert-action>
<sa-button size="ButtonSize.ExtraSmall">Undo</sa-button>
</sa-alert-action>
</sa-alert>
<sa-alert>
<sa-icon name="circle-alert"/>
<sa-alert-title>The selected bookings have been archived.</sa-alert-title>
<sa-alert-description>
Archived bookings stay searchable and can be restored from the
archive at any time.
</sa-alert-description>
<sa-alert-action>
<sa-badge variant="BadgeVariant.Secondary">3 bookings</sa-badge>
</sa-alert-action>
</sa-alert>
</div>API Reference
<sa-alert>
Renders a <div> element with role="alert". The icon, title, and description shorthand attributes cannot be combined with child content.
Prop
Type
<sa-alert-title>
Renders a <div> element.
<sa-alert-description>
Renders a <div> element.
<sa-alert-action>
Renders a <div> element that hosts actions the user can take.