<h3>Button groups</h3>

<p>
    Buttons can be grouped together using the <code>button_group</code> component. Direction
    of the group can be set to either horizontal or vertical by setting the <code>direction</code> parameter
    to either "row" or "column".
</p>


{%- call ui.util.call(show_example) -%}
    {%- raw %}
        {%- call ui.util.call(ui.button_group, direction="row") -%}
            {{ ui.button("First") }}
            {{ ui.button("Second", style="danger") }}
        {%- endcall %}

        {% call ui.util.call(ui.button_group, direction="column") -%}
            {{ ui.button(ui.icon("edit")) }}
            {{ ui.button(ui.icon("trash"), style="danger") }}
        {%- endcall %}
    {%- endraw %}
{%- endcall %}