Button Group

component

The button group component from Flowbite can be used to stack together multiple buttons and links inside a single element.

Install

php bin/console ux:install button-group \
    --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 (3)

Default

Light

Dark

Code

<twig:ButtonGroup>
    <twig:Button variant="tertiary" size="sm">Profile</twig:Button>
    <twig:Button variant="tertiary" size="sm">Settings</twig:Button>
    <twig:Button variant="tertiary" size="sm">Messages</twig:Button>
</twig:ButtonGroup>

Orientation

Light

Dark

Code

<twig:ButtonGroup orientation="vertical" class="w-56">
    <twig:Button variant="tertiary">Profile</twig:Button>
    <twig:Button variant="tertiary">Settings</twig:Button>
    <twig:Button variant="tertiary">Messages</twig:Button>
</twig:ButtonGroup>

Size

Light

Dark

Code

<div class="flex flex-col items-start gap-8">
    <twig:ButtonGroup>
        <twig:Button variant="tertiary" size="sm">Small</twig:Button>
        <twig:Button variant="tertiary" size="sm">Button</twig:Button>
        <twig:Button variant="tertiary" size="sm">Group</twig:Button>
    </twig:ButtonGroup>
    <twig:ButtonGroup>
        <twig:Button variant="tertiary">Default</twig:Button>
        <twig:Button variant="tertiary">Button</twig:Button>
        <twig:Button variant="tertiary">Group</twig:Button>
    </twig:ButtonGroup>
    <twig:ButtonGroup>
        <twig:Button variant="tertiary" size="lg">Large</twig:Button>
        <twig:Button variant="tertiary" size="lg">Button</twig:Button>
        <twig:Button variant="tertiary" size="lg">Group</twig:Button>
    </twig:ButtonGroup>
</div>