ButtonGroup

component

Buttons that belong together, joined: a view switcher, the previous and next periods.

Preview

Light

Code

<twig:ButtonGroup aria-label="View">
    <twig:Button variant="outline">Day</twig:Button>
    <twig:Button variant="outline">Week</twig:Button>
</twig:ButtonGroup>

Dark

Code

<twig:ButtonGroup aria-label="View">
    <twig:Button variant="outline">Day</twig:Button>
    <twig:Button variant="outline">Week</twig:Button>
</twig:ButtonGroup>

Try it

Change the props; the example is rendered again by the server.

<twig:ButtonGroup aria-label="View">
    <twig:Button variant="outline">Day</twig:Button>
    <twig:Button variant="outline">Week</twig:Button>
</twig:ButtonGroup>

Variants

`orientation`

The layout direction of the button group.

orientation="horizontal"

orientation="vertical"

Installation

php bin/console ux:install button-group --kit=github.com/parler-haut-interagir-librement/ux-kit

It brings the recipes it needs: separator

Props

Prop	Type	Default	Description
`orientation`	`'horizontal'\|'vertical'`	`'horizontal'`	The layout direction of the button group.

Accessibility

Name the group with aria-label: the name says what its buttons do together.

Files to copy

templates/components/ButtonGroup.html.twig

{%- props
    ## 'horizontal'|'vertical' The layout direction of the button group.
    orientation = 'horizontal'
-%}
<div data-slot="button-group" role="group" data-orientation="{{ orientation }}"{{ attributes.defaults({class: 'isButtonGroup' ~ (orientation is same as('vertical') ? ' isVertical' : '')}) }}>
{##- The grouped buttons and/or separators. -#}
{%- block content %}{% endblock -%}
</div>

templates/components/ButtonGroup/Separator.html.twig

{%- props
    ## 'horizontal'|'vertical' The separator orientation.
    orientation = 'vertical'
-%}
<twig:Separator orientation="{{ orientation }}" data-slot="button-group-separator" {{ ...attributes }} />

templates/components/ButtonGroup/Text.html.twig

{%- props
    ## 'div'|'span' The HTML tag to render.
    as = 'div'
-%}
{%- set _tag = as is same as('span') ? 'span' : 'div' -%}
<{{ _tag }} data-slot="button-group-text"{{ attributes.defaults({class: 'isButtonGroupText'}) }}>
{##- The text content displayed in the button group. -#}
{%- block content %}{% endblock -%}
</{{ _tag }}>