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

Loading... 
<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.12.0 tales-from-a-dev/twig-tailwind-extra:^1.0.0

Copy the following file(s) into your app:

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

) -%}
&lt;span
    class=&quot;{{ style.apply({variant: variant, size: size}, attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/span&gt;

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.

Loading... 
<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.