ButtonGroup

{% component "ButtonGroup" %}
              {% component "Button" variant="primary" %}Left{% endcomponent %}
              {% component "Button" variant="primary" %}Middle{% endcomponent %}
              {% component "Button" variant="primary" %}Right{% endcomponent %}
            {% endcomponent %}

{% component "ButtonGroup" %}
              {% component "Button" variant="danger" %}Danger{% endcomponent %}
              {% component "Button" variant="warning" %}Warning{% endcomponent %}
              {% component "Button" variant="success" %}Success{% endcomponent %}
            {% endcomponent %}

{% component "ButtonGroup" %}
              {% component "ToggleButton" attrs:id="btncheck1" %}Checkbox 1{% endcomponent %}
              {% component "ToggleButton" attrs:id="btncheck2" %}Checkbox 2{% endcomponent %}
              {% component "ToggleButton" attrs:id="btncheck3" %}Checkbox 3{% endcomponent %}
            {% endcomponent %}

{% component "ButtonGroup" %}
              {% component "ToggleButton" type="radio" name="btnradio" attrs:id="btnradio1" checked=True %}Radio 1{% endcomponent %}
              {% component "ToggleButton" type="radio" name="btnradio" attrs:id="btnradio2" %}Radio 2{% endcomponent %}
              {% component "ToggleButton" type="radio" name="btnradio" attrs:id="btnradio3" %}Radio 3{% endcomponent %}
            {% endcomponent %}

{% component "ButtonGroup" size="lg" %}
              {% component "Button" variant="primary" outline=True %}Left{% endcomponent %}
              {% component "Button" variant="primary" outline=True %}Middle{% endcomponent %}
              {% component "Button" variant="primary" outline=True %}Right{% endcomponent %}
            {% endcomponent %}

{% component "ButtonGroup" size="sm" %}
              {% component "Button" variant="primary" outline=True %}Left{% endcomponent %}
              {% component "Button" variant="primary" outline=True %}Middle{% endcomponent %}
              {% component "Button" variant="primary" outline=True %}Right{% endcomponent %}
            {% endcomponent %}

{% component "ButtonGroup" vertical=True %}
              {% component "Button" variant="primary" %}Button{% endcomponent %}
              {% component "Button" variant="primary" %}Button{% endcomponent %}
              {% component "Button" variant="primary" %}Button{% endcomponent %}
              {% component "Button" variant="primary" %}Button{% endcomponent %}
            {% endcomponent %}

{% component "ButtonToolbar" %}
              {% component "ButtonGroup" attrs:class="me-2" %}
                {% component "Button" variant="primary" %}1{% endcomponent %}
                {% component "Button" variant="primary" %}2{% endcomponent %}
                {% component "Button" variant="primary" %}3{% endcomponent %}
                {% component "Button" variant="primary" %}4{% endcomponent %}
              {% endcomponent %}
              {% component "ButtonGroup" attrs:class="me-2" %}
                {% component "Button" variant="secondary" %}5{% endcomponent %}
                {% component "Button" variant="secondary" %}6{% endcomponent %}
                {% component "Button" variant="secondary" %}7{% endcomponent %}
              {% endcomponent %}
              {% component "ButtonGroup" %}
                {% component "Button" variant="info" %}8{% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}