Alert

<x-ui.alert class="max-w-md">
    <x-lucide-circle-check />
    <x-ui.alert-title>Success! Your changes have been saved</x-ui.alert-title>
    <x-ui.alert-description>This is an alert with icon, title and description.</x-ui.alert-description>
</x-ui.alert>

<x-ui.alert variant="destructive" class="max-w-md">
    <x-lucide-circle-alert />
    <x-ui.alert-title>Unable to process your payment.</x-ui.alert-title>
    <x-ui.alert-description>Please verify your billing information and try again.</x-ui.alert-description>
</x-ui.alert>

{{-- Dismissible alert with a close button. --}}
<x-ui.alert x-data="{ show: true }" x-show="show" class="max-w-md pe-10">
    <x-lucide-info />
    <x-ui.alert-title>Verify your email to activate your account</x-ui.alert-title>
    <x-ui.alert-description>We've sent a confirmation link to your inbox.</x-ui.alert-description>
    <x-ui.alert-action>
        <button type="button" @click="show = false" aria-label="Dismiss" class="text-muted-foreground hover:text-foreground rounded-sm transition-colors">
            <x-lucide-x class="size-4" />
        </button>
    </x-ui.alert-action>
</x-ui.alert>

{{-- Subtle top-to-bottom gradient fill. --}}
<x-ui.alert class="border-accent-foreground/20 from-accent to-transparent to-60% text-accent-foreground bg-linear-to-b max-w-md [&>svg]:text-accent-foreground">
    <x-lucide-mail />
    <x-ui.alert-title>Verify your email to activate your account</x-ui.alert-title>
    <x-ui.alert-description class="text-accent-foreground/70">We've sent a confirmation link to your inbox. Check your email to complete the sign-up.</x-ui.alert-description>
</x-ui.alert>

{{-- Segmented alert with a coloured icon panel on the leading edge. --}}
<x-ui.alert class="flex max-w-md items-stretch gap-0 overflow-hidden p-0">
    <div class="bg-destructive/10 text-destructive flex items-center border-r p-3">
        <x-lucide-shield-alert class="size-4" />
    </div>
    <div class="flex items-center p-3">
        <x-ui.alert-title>This file may contain a virus.</x-ui.alert-title>
    </div>
</x-ui.alert>

<x-ui.alert class="max-w-md border-blue-200 bg-blue-50 text-blue-900 [&>svg]:text-blue-600 dark:border-blue-900/50 dark:bg-blue-950/40 dark:text-blue-100 dark:[&>svg]:text-blue-400">
    <x-lucide-info />
    <x-ui.alert-title>Heads up!</x-ui.alert-title>
    <x-ui.alert-description>A new software update is available. See what's new in version 2.0.</x-ui.alert-description>
</x-ui.alert>

{{-- Tinted callouts with a thick coloured bar on the leading edge. --}}
<div class="flex w-full max-w-xl flex-col gap-3">
    <x-ui.alert class="bg-success/10 text-success rounded-md border-0 border-l-4 border-success [&>svg]:text-success">
        <x-lucide-circle-check />
        <x-ui.alert-title>Your request to join the team is approved.</x-ui.alert-title>
    </x-ui.alert>
    <x-ui.alert class="bg-info/10 text-info rounded-md border-0 border-l-4 border-info [&>svg]:text-info">
        <x-lucide-info />
        <x-ui.alert-title>A new comment was added to your document.</x-ui.alert-title>
    </x-ui.alert>
    <x-ui.alert class="bg-destructive/10 text-destructive rounded-md border-0 border-l-4 border-destructive [&>svg]:text-destructive">
        <x-lucide-circle-x />
        <x-ui.alert-title>This file could not be uploaded.</x-ui.alert-title>
    </x-ui.alert>
</div>

{{-- Outlined alerts: coloured border + text on the card background. --}}
<div class="flex w-full max-w-xl flex-col gap-3">
    <x-ui.alert class="border-info text-info bg-card [&>svg]:text-info">
        <x-lucide-info />
        <x-ui.alert-title>A new software update is available</x-ui.alert-title>
        <x-ui.alert-description class="text-info">Version 2.4 is ready to install.</x-ui.alert-description>
    </x-ui.alert>
    <x-ui.alert class="border-success text-success bg-card [&>svg]:text-success">
        <x-lucide-circle-check />
        <x-ui.alert-title>Changes saved successfully</x-ui.alert-title>
        <x-ui.alert-description class="text-success">Your profile has been updated.</x-ui.alert-description>
    </x-ui.alert>
    <x-ui.alert class="border-warning text-warning bg-card [&>svg]:text-warning">
        <x-lucide-triangle-alert />
        <x-ui.alert-title>Your storage is almost full</x-ui.alert-title>
        <x-ui.alert-description class="text-warning">You've used 90% of your quota.</x-ui.alert-description>
    </x-ui.alert>
    <x-ui.alert class="border-destructive text-destructive bg-card [&>svg]:text-destructive">
        <x-lucide-circle-x />
        <x-ui.alert-title>Something went wrong</x-ui.alert-title>
        <x-ui.alert-description class="text-destructive">Please try again in a few minutes.</x-ui.alert-description>
    </x-ui.alert>
</div>

<x-ui.alert class="max-w-md">
    <x-lucide-terminal />
    <x-ui.alert-title>You can add components to your app using the CLI.</x-ui.alert-title>
</x-ui.alert>

{{-- Solid, filled alerts for high-emphasis messages. --}}
<div class="flex w-full max-w-xl flex-col gap-3">
    <x-ui.alert class="bg-primary text-primary-foreground border-none [&>svg]:text-primary-foreground">
        <x-lucide-info />
        <x-ui.alert-title>Editing your profile</x-ui.alert-title>
        <x-ui.alert-description class="text-primary-foreground">Changes won't be saved until you click "Update".</x-ui.alert-description>
    </x-ui.alert>
    <x-ui.alert class="bg-success text-success-foreground border-none [&>svg]:text-success-foreground">
        <x-lucide-circle-check />
        <x-ui.alert-title>Payment received</x-ui.alert-title>
        <x-ui.alert-description class="text-success-foreground">Your subscription is now active.</x-ui.alert-description>
    </x-ui.alert>
    <x-ui.alert class="bg-warning text-warning-foreground border-none [&>svg]:text-warning-foreground">
        <x-lucide-triangle-alert />
        <x-ui.alert-title>Action required</x-ui.alert-title>
        <x-ui.alert-description class="text-warning-foreground">Confirm your email address to continue.</x-ui.alert-description>
    </x-ui.alert>
    <x-ui.alert class="bg-destructive border-none text-white [&>svg]:text-white">
        <x-lucide-circle-x />
        <x-ui.alert-title>Your session has expired</x-ui.alert-title>
        <x-ui.alert-description class="text-white">Please sign in again to continue.</x-ui.alert-description>
    </x-ui.alert>
</div>

<div class="flex w-full max-w-xl flex-col gap-3">
    <x-ui.alert tone="success">
        <x-lucide-circle-check />
        <x-ui.alert-title>Payment received</x-ui.alert-title>
        <x-ui.alert-description>Your booking is confirmed.</x-ui.alert-description>
    </x-ui.alert>
    <x-ui.alert tone="warning">
        <x-lucide-triangle-alert />
        <x-ui.alert-title>Awaiting confirmation</x-ui.alert-title>
        <x-ui.alert-description>The agency has not approved this reservation yet.</x-ui.alert-description>
    </x-ui.alert>
    <x-ui.alert tone="danger">
        <x-lucide-circle-x />
        <x-ui.alert-title>Reservation declined</x-ui.alert-title>
        <x-ui.alert-description>Please pick another vehicle or date.</x-ui.alert-description>
    </x-ui.alert>
    <x-ui.alert tone="info">
        <x-lucide-info />
        <x-ui.alert-title>Heads up</x-ui.alert-title>
        <x-ui.alert-description>Pickup is available from 8am.</x-ui.alert-description>
    </x-ui.alert>
</div>

<x-ui.alert class="max-w-md border-amber-200 bg-amber-50 text-amber-900 [&>svg]:text-amber-600 dark:border-amber-900/50 dark:bg-amber-950/40 dark:text-amber-100 dark:[&>svg]:text-amber-400">
    <x-lucide-triangle-alert />
    <x-ui.alert-title>Your subscription is expiring soon</x-ui.alert-title>
    <x-ui.alert-description>Renew before June 30 to keep your projects active.</x-ui.alert-description>
</x-ui.alert>

{{-- Alert with a trailing action button. --}}
<x-ui.alert class="flex max-w-md items-center justify-between gap-3">
    <div class="flex items-center gap-3">
        <x-ui.avatar class="size-9 rounded-md"><x-ui.avatar-fallback class="rounded-md">SR</x-ui.avatar-fallback></x-ui.avatar>
        <div class="space-y-0.5">
            <x-ui.alert-title>Sara replied to your photo</x-ui.alert-title>
            <x-ui.alert-description>12 unread messages. Tap to see.</x-ui.alert-description>
        </div>
    </div>
    <x-ui.button variant="outline" size="sm">View</x-ui.button>
</x-ui.alert>