A static copy of the demo at release 0.3.0. Live Components, Turbo Streams and form submits need Symfony: run the full demo.

Badge

component

The badge component can be used to complement other elements such as buttons or text elements as a label or to show the count of a given data, such as the number of comments for an article or how much time has passed by since a comment has been made.

Install

php bin/console ux:install badge \
    --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 (6)

Default

Light
Dark
Code 
<div class="flex flex-wrap justify-center gap-4">
    <twig:Badge variant="brand">Brand</twig:Badge>
    <twig:Badge variant="alternative">Alternative</twig:Badge>
    <twig:Badge variant="gray">Gray</twig:Badge>
    <twig:Badge variant="danger">Danger</twig:Badge>
    <twig:Badge variant="success">Success</twig:Badge>
    <twig:Badge variant="warning">Warning</twig:Badge>
</div>

Bordered badges

Light
Dark
Code 
<div class="flex flex-wrap justify-center gap-4">
    <twig:Badge variant="brand" border="bordered">Brand</twig:Badge>
    <twig:Badge variant="alternative" border="bordered">Alternative</twig:Badge>
    <twig:Badge variant="gray" border="bordered">Gray</twig:Badge>
    <twig:Badge variant="danger" border="bordered">Danger</twig:Badge>
    <twig:Badge variant="success" border="bordered">Success</twig:Badge>
    <twig:Badge variant="warning" border="bordered">Warning</twig:Badge>
</div>

Large badges

Light
Dark
Code 
<div class="flex flex-wrap justify-center gap-4">
    <twig:Badge variant="brand" size="lg">Brand</twig:Badge>
    <twig:Badge variant="alternative" size="lg">Alternative</twig:Badge>
    <twig:Badge variant="gray" size="lg">Gray</twig:Badge>
    <twig:Badge variant="danger" size="lg">Danger</twig:Badge>
    <twig:Badge variant="success" size="lg">Success</twig:Badge>
    <twig:Badge variant="warning" size="lg">Warning</twig:Badge>
</div>

Pill badges

Light
Dark
Code 
<div class="flex flex-wrap justify-center gap-4">
    <twig:Badge variant="brand" shape="pill">Brand</twig:Badge>
    <twig:Badge variant="alternative" shape="pill">Alternative</twig:Badge>
    <twig:Badge variant="gray" shape="pill">Gray</twig:Badge>
    <twig:Badge variant="danger" shape="pill">Danger</twig:Badge>
    <twig:Badge variant="success" shape="pill">Success</twig:Badge>
    <twig:Badge variant="warning" shape="pill">Warning</twig:Badge>
</div>

Badges with icon

Light
Dark
Code 
<div class="flex flex-wrap justify-center gap-4">
    <twig:Badge variant="brand" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
    <twig:Badge variant="alternative" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
    <twig:Badge variant="gray" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
    <twig:Badge variant="danger" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
    <twig:Badge variant="success" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
    <twig:Badge variant="warning" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
</div>