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" %}
              <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
              <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>

              <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
              <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>

              <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
              <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
            {% endcomponent %}

{% component "ButtonGroup" %}
              <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
              <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

              <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
              <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

              <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
              <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
            {% 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 %}