Indicator

component

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

Install

php bin/console ux:install indicator \
    --kit=https://github.com/xormania/uxor:0.3.0

README Source

What it installs

Copies: templates/ → templates/
Composer: 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

Examples (2)

Default

Light

Dark

Code

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

Count indicator

Light

Dark

Code

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