Alert

<div class="grid w-full max-w-xl items-start gap-4">
    <twig:Alert class="max-w-md">
        <twig:ux:icon name="lucide:circle-check" />
        <twig:Alert:Title>Payment successful</twig:Alert:Title>
        <twig:Alert:Description>
            Your payment of $29.99 has been processed. A receipt has been sent to your email address.
        </twig:Alert:Description>
    </twig:Alert>
    <twig:Alert class="max-w-md">
        <twig:ux:icon name="lucide:circle-alert" />
        <twig:Alert:Title>New feature available</twig:Alert:Title>
        <twig:Alert:Description>
            We've added dark mode support. You can enable it in your account settings.
        </twig:Alert:Description>
    </twig:Alert>
</div>

composer require twig/extra-bundle twig/html-extra:^3.12.0 tales-from-a-dev/twig-tailwind-extra:^1.0.0

{# @prop variant 'default'|'destructive' The variant, default to `default` #}
{# @block content The default block #}
{%- props variant = 'default' -%}
{%- set style = html_cva(
    base: "grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
    variants: {
        variant: {
            default: 'bg-card text-card-foreground',
            destructive: 'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
        },
    },
) -%}

<div
    data-slot="alert"
    role="alert"
    class="{{ style.apply({variant: variant}, attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>

{# @block content The default block #}
<div
    data-slot="alert-action"
    class="{{ 'absolute top-2 right-2 ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>

{# @block content The default block #}
<div
    data-slot="alert-description"
    class="{{ 'text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3 ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>

{# @block content The default block #}
<div
    data-slot="alert-title"
    class="{{ 'font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3 ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>

<twig:Alert class="max-w-md">
    <twig:ux:icon name="lucide:circle-check" />
    <twig:Alert:Title>Account updated successfully</twig:Alert:Title>
    <twig:Alert:Description>
        Your profile information has been saved. Changes will be reflected immediately.
    </twig:Alert:Description>
</twig:Alert>

<twig:Alert variant="destructive" class="max-w-md">
    <twig:ux:icon name="lucide:circle-alert" />
    <twig:Alert:Title>Payment failed</twig:Alert:Title>
    <twig:Alert:Description>
        Your payment could not be processed. Please check your payment method and try again.
    </twig:Alert:Description>
</twig:Alert>

<twig:Alert class="max-w-md">
    <twig:Alert:Title>Dark mode is now available</twig:Alert:Title>
    <twig:Alert:Description>
        Enable it under your profile settings to get started.
    </twig:Alert:Description>
    <twig:Alert:Action>
        <twig:Button size="xs" variant="default">
            Enable
        </twig:Button>
    </twig:Alert:Action>
</twig:Alert>

<twig: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">
    <twig:ux:icon name="lucide:triangle-alert" />
    <twig:Alert:Title>Your subscription will expire in 3 days.</twig:Alert:Title>
    <twig:Alert:Description>
        Renew now to avoid service interruption or upgrade to a paid plan to continue using the service.
    </twig:Alert:Description>
</twig:Alert>