Button Group

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

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

bin/console ux:install button-group --kit flowbite-4

That's it!

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 Symfony app:

templates/components/ButtonGroup.html.twig 
{# @prop orientation 'horizontal'|'vertical' The layout direction of the button group. Defaults to `horizontal` #}
{# @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 }}"
    class="{{ style.apply({orientation: orientation}, attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>

Happy coding!

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

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

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

ButtonGroup

Prop Type Description
orientation 'horizontal'|'vertical' The layout direction of the button group. Defaults to horizontal
Block Description
content The grouped buttons and/or separators