View as Markdown

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

100%

<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

php bin/console ux:install indicator --kit flowbite-4

Install the following Composer dependencies:

composer require twig/extra-bundle twig/html-extra:^3.24.0 symfony/ux-twig-component:^3.5 tales-from-a-dev/twig-tailwind-extra:^1.3.0

Install the following front-end dependencies:

npm install flowbite
# ...or with Symfony AssetMapper
php bin/console importmap:require flowbite

Copy the following file(s) into your app:

templates/components/Indicator.html.twig

{# @prop variant 'brand'|'gray'|'danger'|'success'|'warning' The visual style variant. #}
{# @prop size 'default'|'lg' The badge size. #}
{# @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
    {{ attributes.defaults({
        class: style.apply({variant: variant, size: size})|tailwind_classes,
    }) }}
>
    {%- block content %}{% endblock -%}
</span>

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.

100%

<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

`<twig:Indicator>`

Prop	Type	Default
`variant`	`'brand'\|'gray'\|'danger'\|'success'\|'warning'`	`'brand'`
`size`	`'default'\|'lg'`	`'default'`

Block	Description
`content`	The value.