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>
<div class="mt-2">
<sa-button size="Small" variant="Outline">
<sa-icon name="tickets-plane"/>
View Tickets
</sa-button>
</div>
</sa-alert-description>
</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>
<sa-icon name="..."/>
<sa-alert-title>...</sa-alert-title>
<sa-alert-description>...</sa-alert-description>
</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
Variants
Use variants to communicate different types of messages.
<sa-alert
icon="circle-check"
title="Booking Confirmed"
description="Your trip to Paris has been successfully booked. Check your email for your e-tickets and itinerary."
/>
<sa-alert
variant="AlertVariant.Destructive"
icon="circle-alert"
title="Payment Failed"
description="We were unable to process your payment for the flight reservation."
/>Icon
Add an icon to your alert for additional information.
<!-- Using shorthand syntax -->
<sa-alert icon="circle-check"
title="Booking Confirmed"
description="Your trip to Paris has been successfully booked. Check your email for your e-tickets and itinerary."/>
<!-- Using composition syntax -->
<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>Custom CSS
Add custom CSS classes to restyle any of the Alert components.
<!-- Using shorthand syntax -->
<sa-alert
class="border-emerald-400 bg-emerald-50 text-emerald-800 [&>svg]:text-emerald-600"
icon="circle-check"
title="Passport Verified"
description="Your passport photo and details have been successfully verified. You are all set for your international journey."/>
<!-- Using composition syntax -->
<sa-alert class="border-orange-500 text-orange-700 bg-transparent [&>svg]:text-orange-500">
<sa-icon name="triangle-alert"/>
<sa-alert-title class="font-bold">Baggage Size Restriction</sa-alert-title>
<sa-alert-description class="text-orange-600">
<p>Checked baggage dimensions for this carrier are stricter than average. Please
<a href="#" class="underline underline-offset-2">review the maximum size</a> before heading to the
airport.
</p>
</sa-alert-description>
</sa-alert>All of the individual alert-related Tag Helpers render a <div> element. As such, you
can add any of the div
attributes
to these Tag Helpers and they will be passed to the underlying div. This is
not limited just to the class attribute.
Action buttons
You can add additional content such as buttons to the alert.
<sa-alert variant="AlertVariant.Destructive">
<sa-icon name="circle-alert"/>
<sa-alert-title>Payment Failed</sa-alert-title>
<sa-alert-description>
<p>We were unable to process your payment for the flight reservation.</p>
<sa-group class="mt-2" gap="Small">
<sa-button size="Small">
<sa-icon name="credit-card"/>
Try Another Credit Card
</sa-button>
<sa-button size="Small" variant="Secondary">
<sa-icon name="mail"/>
Contact Support
</sa-button>
</sa-group>
</sa-alert-description>
</sa-alert>