{% extends "demo_app/pattern_base.html" %}

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">A button group collects similar or related actions.</p>

<h2 class="font-heading-xl margin-top-4">Default</h2>
<c-button_group>
    <c-button_group.button_group_item>
        <c-button text="Back" variant="outline" />
    </c-button_group.button_group_item>
    <c-button_group.button_group_item>
        <c-button text="Save draft" variant="secondary" />
    </c-button_group.button_group_item>
    <c-button_group.button_group_item>
        <c-button text="Continue" />
    </c-button_group.button_group_item>
</c-button_group>

<h2 class="font-heading-xl margin-top-4">Segmented</h2>
<c-button_group segemented="true">
    <c-button_group.button_group_item>
        <c-button text="Map" />
    </c-button_group.button_group_item>
    <c-button_group.button_group_item>
        <c-button text="Satellite" variant="outline" />
    </c-button_group.button_group_item>
    <c-button_group.button_group_item>
        <c-button text="Hybrid" variant="outline" />
    </c-button_group.button_group_item>
</c-button_group>
{% endblock %}