Alert Examples
The alert component can be used to show contextual information to the user such as a success or error message after form validation inside an alert box where you can choose from multiple colors, sizes, and styles.
Default alert #
The default alert component is a simple alert box with a text inside it and you can use the Color property to change the color of the alert box and the TextEmphasis property to add a title to the alert box.
<div class="flex flex-col gap-4">
<Alert Color="AlertColor.Info"
TextEmphasis="Info alert!"
Text="More info about this info alert goes here." />
<Alert Color="AlertColor.Success"
TextEmphasis="Success alert!"
Text="More info about this success alert goes here." />
<Alert Color="AlertColor.Warning"
TextEmphasis="Warning alert!"
Text="More info about this warning alert goes here." />
<Alert Color="AlertColor.Failure"
TextEmphasis="Failure alert!"
Text="More info about this failure alert goes here." />
</div>Alert with icon #
Use the Icon property to add an icon to the alert box. You can use any icon component from our icon library.
<div class="flex flex-col gap-4">
<Alert Color="AlertColor.Info"
Icon="@_infoIcon"
TextEmphasis="Info alert with icon!"
Text="More info about this info alert goes here." />
<Alert Color="AlertColor.Warning"
Icon="@_eyeIcon"
TextEmphasis="Warning alert with icon!"
Text="More info about this warning alert goes here." />
</div>Rounded alert #
To make the alert box rounded, you can use the Rounded property on the Alert component.
<div class="flex flex-col gap-4">
<Alert Color="AlertColor.Info"
TextEmphasis="Info alert!"
Text="More info about this info alert goes here."
Rounded="true" />
<Alert Color="AlertColor.Warning"
TextEmphasis="Warning alert!"
Text="More info about this warning alert goes here."
Rounded="true" />
</div>Border accent #
Add a border accent to the alert box by applying the WithBorderAccent property on the Alert component.
<div class="flex flex-col gap-4">
<Alert Color="AlertColor.Warning"
TextEmphasis="Warning alert!"
Text="More info about this warning alert goes here."
WithBorderAccent="true" />
<Alert Color="AlertColor.Success"
TextEmphasis="Success alert!"
Text="More info about this success alert goes here."
WithBorderAccent="true" />
</div>Additional content #
Add additional content by using the AdditionalContent property and add any type of content inside of it.
- At least 10 characters (and up to 100 characters)
- At least one lowercase character
- Inclusion of at least one special character, e.g., ! @ # ?
<Alert Color="AlertColor.Info">
<CustomContent>
<div class="flex items-center">
<span class="text-lg font-medium">Ensure that these requirements are met:</span>
</div>
</CustomContent>
<AdditionalContent>
<div class="mt-2 mb-4 text-sm text-blue-700 dark:text-blue-800">
<ul class="mt-1.5 list-disc list-inside">
<li>At least 10 characters (and up to 100 characters)</li>
<li>At least one lowercase character</li>
<li>Inclusion of at least one special character, e.g., ! @@ # ?</li>
</ul>
</div>
</AdditionalContent>
</Alert>All options #
This is an example with all of the available options and properties for the Alert component.
<Alert Color="AlertColor.Info"
Icon="@_infoIcon"
TextEmphasis="Info alert with all features!"
Text="This alert has an icon, border accent, and rounded corners."
WithBorderAccent="true"
Rounded="true">
<AdditionalContent>
<div class="mt-2 mb-4 text-sm text-blue-700 dark:text-blue-800">
This is an example of an alert with all available features enabled.
</div>
</AdditionalContent>
</Alert>