© 2026 Leviy

Button groups

A button group contains a group of related options which allows users to toggle between different information or actions.

Button group with icons only

{% import '@leviy-templates/macros/button-groups.html.twig' as button_group %}


{% set exampleButtons = [
    {
        'icon': 'people'
    },
    {
        'icon': 'people',
        'active': true
    },
    {
        'icon': 'people'
    },
    {
        'icon': 'people'
    }
] %}


{{ button_group.button_group(exampleButtons) }}

Button group with text only

{% import '@leviy-templates/macros/button-groups.html.twig' as button_group %}


{% set exampleButtons = [
    {
        'label': 'Primary 1',
    },
    {
        'label': 'Primary 2',
        'active': true,
    },
    {
        'label': 'Primary 3',
    },
    {
        'label': 'Primary 4',
    }
] %}


{{ button_group.button_group(exampleButtons) }}

Button group with text and icon

{% import '@leviy-templates/macros/button-groups.html.twig' as button_group %}


{% set exampleButtons = [
    {
        'label': 'Primary 1',
        'icon': 'people'
    },
    {
        'label': 'Primary 2',
        'icon': 'people',
        'active': true
    },
    {
        'label': 'Primary 3',
        'icon': 'people'
    },
    {
        'label': 'Primary 4',
        'icon': 'people'
    }
] %}


{{ button_group.button_group(exampleButtons) }}