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.

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

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

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

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

&lt;div
    role=&quot;group&quot;
    data-orientation=&quot;{{ orientation }}&quot;
    class=&quot;{{ style.apply({orientation: orientation}, attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/div&gt;

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

<twig:ButtonGroup>

Prop Type Default
orientation 
 'horizontal'|'vertical' 'horizontal'
Block Description
content The grouped buttons and/or separators.