Payment successful
Your payment of $29.99 has been processed. A receipt has been sent to your email address.
New feature available
We've added dark mode support. You can enable it in your account settings.
<div class="grid w-full max-w-md items-start gap-4">
<Alert>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" /></svg>
<AlertTitle>Payment successful</AlertTitle>
<AlertDescription>Your payment of $29.99 has been processed. A receipt has been sent to your email address.</AlertDescription>
</Alert>
<Alert>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" /></svg>
<AlertTitle>New feature available</AlertTitle>
<AlertDescription>We've added dark mode support. You can enable it in your account settings.</AlertDescription>
</Alert>
</div>Installation
Install the alert component using the command or manual steps.
blazor-shadcn add alertUsage
@using BlazorShadcn.Components.UI<Alert>
<AlertTitle>Success! Your changes have been saved</AlertTitle>
<AlertDescription>This is an alert with icon, title and description.</AlertDescription>
</Alert>Examples
Basic
Payment successful
Your payment of $29.99 has been processed. A receipt has been sent to your email address.
New feature available
We've added dark mode support. You can enable it in your account settings.
<div class="grid w-full max-w-md items-start gap-4">
<Alert>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" /></svg>
<AlertTitle>Payment successful</AlertTitle>
<AlertDescription>Your payment of $29.99 has been processed. A receipt has been sent to your email address.</AlertDescription>
</Alert>
<Alert>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" /></svg>
<AlertTitle>New feature available</AlertTitle>
<AlertDescription>We've added dark mode support. You can enable it in your account settings.</AlertDescription>
</Alert>
</div>Destructive
Payment failed
Your payment could not be processed. Please check your payment method and try again.
<div class="grid w-full max-w-md items-start gap-4">
<Alert Variant="Alert.AlertVariant.Destructive">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="M12 8v5" /><path d="M12 16h.01" /></svg>
<AlertTitle>Payment failed</AlertTitle>
<AlertDescription>Your payment could not be processed. Please check your payment method and try again.</AlertDescription>
</Alert>
</div>Action
Dark mode is now available
Enable it under your profile settings to get started.
<div class="grid w-full max-w-md items-start gap-4">
<Alert>
<AlertTitle>Dark mode is now available</AlertTitle>
<AlertDescription>Enable it under your profile settings to get started.</AlertDescription>
<AlertAction>
<Button Size="@Button.ButtonSize.Xs">Enable</Button>
</AlertAction>
</Alert>
</div>Custom Colors
Your subscription will expire in 3 days.
Renew now to avoid service interruption or upgrade to a paid plan to continue using the service.
<div class="grid w-full max-w-md items-start gap-4">
<Alert Class="max-w-md border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-50">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" /><path d="M12 9v4" /><path d="M12 17h.01" /></svg>
<AlertTitle>Your subscription will expire in 3 days.</AlertTitle>
<AlertDescription>Renew now to avoid service interruption or upgrade to a paid plan to continue using the service.</AlertDescription>
</Alert>
</div>API Reference
Alert
<Alert>
<AlertTitle>Title</AlertTitle>
<AlertDescription>Description</AlertDescription>
</Alert>AlertTitle
Use AlertTitle to render the primary alert heading.
<AlertTitle>Title</AlertTitle>AlertDescription
Use AlertDescription for supporting text and longer alert content.
<AlertDescription>Description</AlertDescription>AlertAction
Use AlertAction to position a compact action inside the alert.
<AlertAction>
<Button Size="@Button.ButtonSize.Xs">Action</Button>
</AlertAction>