Alert

The alert component can be used to provide information to your users such as success or error messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page.

<div class="grid w-full max-w-xl items-start gap-4">
    <twig:Alert>
        <twig:Alert:Description>
            <p><span class="font-medium">Info alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="danger">
        <twig:Alert:Description>
            <p><span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="success">
        <twig:Alert:Description>
            <p><span class="font-medium">Success alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="warning">
        <twig:Alert:Description>
            <p><span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="dark">
        <twig:Alert:Description>
            <p><span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>
</div>

Installation

bin/console ux:install alert --kit flowbite-4

That's it!

Install the following Composer dependencies:

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

Copy the following file(s) into your Symfony app:

templates/components/Alert.html.twig

{# @prop variant 'brand'|'danger'|'success'|'warning'|'dark' The visual style variant. Defaults to `brand` #}
{# @prop border 'none'|'bordered'|'accent' The visual border style. Defaults to `none` #}
{# @prop dismissible boolean Whether the alert can be dismissible. Defaults to `false` #}
{# @block content The alert content, typically includes `Alert:Title` and `Alert:Description` #}
{# @block icon The alert icon, typically includes `twig:ux:icon` #}
{%- props variant = 'brand', border = 'none', dismissible = false -%}
{%- set style = html_cva(
    base: "flex gap-2 text-sm p-4 rounded-base border-transparent *:[svg:not([class*='size-'])]:size-4 [&_a]:hover:no-underline [&_a]:underline group/alert",
    variants: {
        border: {
            none: '',
            bordered: 'border',
            accent: 'border-t-4',
        },
        variant: {
            brand: 'text-fg-brand-strong bg-brand-softer border-brand-subtle',
            danger: 'text-fg-danger-strong bg-danger-soft border-danger-subtle',
            success: 'text-fg-success-strong bg-success-soft border-success-subtle',
            warning: 'text-fg-warning bg-warning-soft border-warning-subtle',
            dark: 'text-heading bg-neutral-secondary-medium border-default-medium',
        },
    },
) -%}

<div
    role="alert"
    class="{{ style.apply({variant: variant, border: border}, attributes.render('class'))|tailwind_merge }}"
    {% if dismissible %}
    data-controller="alert"
    data-alert-target="alert"
    {% endif %}
    {{ attributes }}
>
    {%- block icon %}{% endblock -%}
    <div>
        {%- block content %}{% endblock -%}
    </div>
    {% if dismissible %}
        <button type="button" class="ms-auto -mx-1.5 -my-1.5 rounded focus:ring-2 focus:ring-[currentColor]/20 hover:bg-[currentColor]/10 inline-flex items-center justify-center h-8 w-8 shrink-0" data-action="click->alert#close" aria-label="Close">
            <span class="sr-only">Close</span>
            <twig:ux:icon name="flowbite:close-outline" class="size-4" />
        </button>
    {% endif %}
</div>

templates/components/Alert/Action.html.twig

{# @block content The action element, typically a button or link #}
<div
    class="{{ ('mt-2 group-has-[>svg]/alert:col-start-2  ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>

templates/components/Alert/Description.html.twig

{# @block content The descriptive text of the alert #}
<div
    class="{{ (' ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>

templates/components/Alert/Title.html.twig

{# @block content The title text of the alert #}
<div
    class="{{ ('font-medium group-has-[>svg]/alert:col-start-2 ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>

Happy coding!

Usage

<twig:Alert
    variant="brand | danger | success | warning | dark"
    border=" none | bordered | accent"
>
    <twig:block name="icon">
        <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
    </twig:block>
    <twig:Alert:Title>Info alert!</twig:Alert:Title>
    <twig:Alert:Description>
        You can add components to your app using the cli.
    </twig:Alert:Description>
    <twig:Alert:Action>
        <twig:Button size="sm">Enable</twig:Button>
    </twig:Alert:Action>
</twig:Alert>

Examples

Alerts with icon

You can also include a descriptive icon to complement the message inside the alert component with the following example.

<div class="grid w-full max-w-xl items-start gap-4">
    <twig:Alert>
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Info alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="danger">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="success">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Success alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="warning">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="dark">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>
</div>

Borders

Use this example to add a border accent to the alert component instead of just a plain background.

<div class="grid w-full max-w-xl items-start gap-4">
    <twig:Alert border="bordered">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Info alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="danger" border="bordered">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="success" border="bordered">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Success alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="warning" border="bordered">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="dark" border="bordered">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>
</div>

With List

Use this example to show a list and a description inside an alert component.

<div class="grid w-full max-w-xl items-start gap-4">
    <twig:Alert variant="success">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Title>Ensure that these requirements are met:</twig:Alert:Title>
        <twig:Alert:Description>
            <ul class="my-2 list-disc list-outside space-y-1 ps-2.5">
                <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>
        </twig:Alert:Description>
        <twig:Alert:Action>
            <a href="#">See recommendation here</a>
        </twig:Alert:Action>
    </twig:Alert>

    <twig:Alert variant="warning">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Title>Ensure that these requirements are met:</twig:Alert:Title>
        <twig:Alert:Description>
            <ul class="my-2 list-disc list-outside space-y-1 ps-2.5">
                <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>
        </twig:Alert:Description>
        <twig:Alert:Action>
            <a href="#">See recommendation here</a>
        </twig:Alert:Action>
    </twig:Alert>

    <twig:Alert variant="danger">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Title>Ensure that these requirements are met:</twig:Alert:Title>
        <twig:Alert:Description>
            <ul class="my-2 list-disc list-outside space-y-1 ps-2.5">
                <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>
        </twig:Alert:Description>
        <twig:Alert:Action>
            <a href="#">See recommendation here</a>
        </twig:Alert:Action>
    </twig:Alert>
</div>

Dismissing

Requires Flowbite JS
Use the following alert elements that are also dismissible.

<div class="grid w-full max-w-xl items-start gap-4">
    <twig:Alert dismissible>
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p>A simple info alert with an <a href="#" class="font-medium">example link</a>. Give it a click if you like.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="danger" dismissible>
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p>A simple danger alert with an <a href="#" class="font-medium">example link</a>. Give it a click if you like.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="success" dismissible>
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p>A simple success alert with an <a href="#" class="font-medium">example link</a>. Give it a click if you like.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="warning" dismissible>
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p>A simple warning alert with an <a href="#" class="font-medium">example link</a>. Give it a click if you like.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="dark" dismissible>
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p>A simple dark alert with an <a href="#" class="font-medium">example link</a>. Give it a click if you like.</p>
        </twig:Alert:Description>
    </twig:Alert>
</div>

Action

Use Alert:Action to add a button or other action element to the alert.

<twig:Alert class="max-w-xl">
    <twig:block name="icon">
        <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
    </twig:block>
    <twig:Alert:Title>This is an info alert</twig:Alert:Title>
    <twig:Alert:Description>
        More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
    </twig:Alert:Description>
    <twig:Alert:Action>
        <twig:Button size="sm">
            <twig:ux:icon name="flowbite:eye-outline" class="size-3.5 me-1.5" aria-hidden="true" />
            View more
        </twig:Button>
    </twig:Alert:Action>
</twig:Alert>

Border Accent

Use this example to add a border accent on top of the alert component for further visual distinction.

<div class="grid w-full max-w-xl items-start gap-4">
    <twig:Alert border="accent" class="rounded-none">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Info alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="danger" border="accent" class="rounded-none">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="success" border="accent" class="rounded-none">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Success alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="warning" border="accent" class="rounded-none">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="dark" border="accent" class="rounded-none">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>
</div>

API Reference

Alert

Prop	Type	Description
`variant`	`'brand'\|'danger'\|'success'\|'warning'\|'dark'`	The visual style variant. Defaults to `brand`
`border`	`'none'\|'bordered'\|'accent'`	The visual border style. Defaults to `none`
`dismissible`	`boolean`	Whether the alert can be dismissible. Defaults to `false`

Block	Description
`content`	The alert content, typically includes `Alert:Title` and `Alert:Description`
`icon`	The alert icon, typically includes `twig:ux:icon`

Alert:Action

Block	Description
`content`	The action element, typically a button or link

Alert:Description

Block	Description
`content`	The descriptive text of the alert

Alert:Title

Block	Description
`content`	The title text of the alert