View as Markdown

Button Group

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

100%

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

Installation

php bin/console ux:install button-group --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/ButtonGroup.html.twig

{# @prop orientation 'horizontal'|'vertical' The layout direction of the button group. #}
{# @block content The grouped buttons and/or separators. #}
{%- props orientation = 'horizontal' -%}
{%- set style = html_cva(
    base: 'inline-flex rounded-base shadow-xs -space-x-px [&>*]:rounded-none',
    variants: {
        orientation: {
            horizontal: '[&>*:first-child]:rounded-s-base [&>*:last-child]:rounded-e-base',
            vertical: 'flex-col [&>*:first-child]:rounded-t-base [&>*:last-child]:rounded-b-base',
        },
    },
) -%}

<div
    role="group"
    data-orientation="{{ orientation }}"
    {{ attributes.defaults({
        class: style.apply({orientation: orientation})|tailwind_classes,
    }) }}
>
    {%- block content %}{% endblock -%}
</div>

Usage

<twig:ButtonGroup>
    <twig:Button variant="tertiary">One</twig:Button>
    <twig:Button variant="tertiary">Two</twig:Button>
</twig:ButtonGroup>

Accessibility

The ButtonGroup component has the role attribute set to group.
Use Tab to navigate between the buttons in the group.

Examples

Orientation

100%

<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

100%

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

API Reference

`<twig:ButtonGroup>`

Prop	Type	Default
`orientation`	`'horizontal'\|'vertical'`	`'horizontal'`

Block	Description
`content`	The grouped buttons and/or separators.