Button Group

A button group allows you to group related buttons into sections.

<sa-button-group>
    <sa-button-group>
        <sa-button variant="Outline" size="Icon">
            <sa-icon name="arrow-left"/>
        </sa-button>
    </sa-button-group>
    <sa-button-group>
        <sa-button variant="Outline">Review</sa-button>
        <sa-button variant="Outline">Book Again</sa-button>
    </sa-button-group>
    <sa-button-group>
        <sa-button variant="Outline">
            <sa-icon name="mail"/>
            Email Property
        </sa-button>
    </sa-button-group>
</sa-button-group>

Usage

<sa-button-group>
    <sa-button>...</sa-button>
    <sa-button>...</sa-button>
</sa-button-group>

Examples

Orientation

Use the orientation property to switch to a vertical layout.

<sa-button-group orientation="Vertical">
    <sa-button variant="Outline" size="Icon">
        <sa-icon name="plus"/>
    </sa-button>
    <sa-button variant="Outline" size="Icon">
        <sa-icon name="minus"/>
    </sa-button>
</sa-button-group>

Sizes

Control the size of the buttons using the size property of the individual buttons.

<sa-button-group>
    <sa-button variant="Outline" size="Small">Small</sa-button>
    <sa-button variant="Outline" size="Small">Button</sa-button>
    <sa-button variant="Outline" size="Small">Group</sa-button>
    <sa-button variant="Outline" size="IconSmall">
        <sa-icon name="plus"/>
    </sa-button>
</sa-button-group>
<sa-button-group>
    <sa-button variant="Outline" size="Default">Default</sa-button>
    <sa-button variant="Outline" size="Default">Button</sa-button>
    <sa-button variant="Outline" size="Default">Group</sa-button>
    <sa-button variant="Outline" size="Icon">
        <sa-icon name="plus"/>
    </sa-button>
</sa-button-group>
<sa-button-group>
    <sa-button variant="Outline" size="Large">Large</sa-button>
    <sa-button variant="Outline" size="Large">Button</sa-button>
    <sa-button variant="Outline" size="Large">Group</sa-button>
    <sa-button variant="Outline" size="IconLarge">
        <sa-icon name="plus"/>
    </sa-button>
</sa-button-group>

Nested

You can nest button groups to create multiple groupings.

<sa-button-group>
    <sa-button-group>
        <sa-button variant="Outline">1</sa-button>
        <sa-button variant="Outline">2</sa-button>
        <sa-button variant="Outline">3</sa-button>
        <sa-button variant="Outline">4</sa-button>
        <sa-button variant="Outline">5</sa-button>
        <sa-button variant="Outline">6</sa-button>
    </sa-button-group>
    <sa-button-group>
        <sa-button variant="Outline">
            <sa-icon name="chevron-left"/>
        </sa-button>
        <sa-button variant="Outline">
            <sa-icon name="chevron-right"/>
        </sa-button>
    </sa-button-group>
</sa-button-group>

Separator

When using button variants without a border (such as Default or Secondary), you can add a separator to visually separate buttons.

<sa-button-group>
    <sa-button variant="Default">Review</sa-button>
    <sa-button-group-separator/>
    <sa-button variant="Default">Book Again</sa-button>
</sa-button-group>
<sa-button-group>
    <sa-button variant="Secondary">Review</sa-button>
    <sa-button-group-separator/>
    <sa-button variant="Secondary">Book Again</sa-button>
</sa-button-group>

Split

Create a split button group by adding two buttons separated by a <sa-button-separator>

<sa-button-group>
    <sa-button variant="Secondary">Button</sa-button>
    <sa-button-group-separator/>
    <sa-button size="Icon" variant="Secondary">
        <sa-icon name="plus"/>
    </sa-button>
</sa-button-group>

Input

Wrap a <sa-input> Tag Helper with buttons.

<sa-button-group>
    <sa-input placeholder="Search..." />
    <sa-button variant="Outline" aria-label="Search">
        <sa-icon name="search" />
    </sa-button>
</sa-button-group>

Input Group

Wrap a <sa-input-group> Tag Helper to create complex input layouts.

<sa-button-group class="[--radius:9999rem]">
    <sa-button-group>
        <sa-button variant="Outline" size="Icon">
            <sa-icon name="plus"/>
        </sa-button>
    </sa-button-group>
    <sa-button-group>
        <sa-input-group>
            <sa-input-group-input placeholder="Send a message..." />
            <sa-input-group-addon align="InputGroupAddOnVariantAlignment.InlineEnd">
                <sa-input-group-button size="InputGroupButtonSize.IconExtraSmall">
                    <sa-icon name="audio-lines" />
                </sa-input-group-button>
            </sa-input-group-addon>
        </sa-input-group>
    </sa-button-group>
</sa-button-group>

Text

Use the <sa-button-group-text> Tag Helper to display static text.

<sa-button-group>
    <sa-button variant="Outline">
        <sa-icon name="bookmark"/>
        Bookmark
    </sa-button>
    <sa-button-group-text>56</sa-button-group-text>
</sa-button-group>

Button Group

On this page