Indicator

Use the indicator component to show a number count, account status, or as a loading label positioned relative to the parent component coded with Tailwind CSS

<div class="flex justify-center gap-4">
    <twig:Indicator variant="brand" />
    <twig:Indicator variant="gray" />
    <twig:Indicator variant="danger" />
    <twig:Indicator variant="success" />
    <twig:Indicator variant="warning" />
</div>

Installation

bin/console ux:install indicator --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/Indicator.html.twig

{# @prop variant 'brand'|'gray'|'danger'|'success'|'warning' The visual style variant. Defaults to `brand` #}
{# @prop size 'default'|'lg' The badge size. Defaults to `default` #}
{# @block content The value #}
{%- props variant = 'brand', size = 'default' -%}
{%- set style = html_cva(
    base: 'inline-flex items-center justify-center text-xs font-bold rounded-full',
    variants: {
        variant: {
            brand: 'bg-brand text-white',
            gray: 'bg-neutral-quaternary text-heading',
            danger: 'bg-danger text-white',
            success: 'bg-success text-white',
            warning: 'bg-warning text-white',
        },
        size: {
            default: 'size-3',
            lg: 'size-6',
        },
    },

) -%}
<span
    class="{{ style.apply({variant: variant, size: size}, attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</span>

Happy coding!

Usage

<twig:Indicator
    variant="brand | gray | danger | success | warning"
>
    Value
</twig:Indicator>

Examples

Count indicator

This example can be used to show a number count inside the indicator and position it relative to a button component.

<twig:Button class="relative">
    <twig:ux:icon name="flowbite:inbox-full-outline" class="size-4 me-1.5 -ms-0.5" aria-hidden="true" />
    <span class="sr-only">Notifications</span>
    Messages
    <twig:Indicator variant="danger" size="lg" class="absolute -top-2 -end-2 border-2 border-buffer">8</twig:Indicator>
</twig:Button>

API Reference

Indicator

Prop	Type	Description
`variant`	`'brand'\|'gray'\|'danger'\|'success'\|'warning'`	The visual style variant. Defaults to `brand`
`size`	`'default'\|'lg'`	The badge size. Defaults to `default`

Block	Description
`content`	The value