Button Group
Group related buttons together into a single section
Theme
<sa-button-group>
<sa-button-group>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Icon">
<sa-icon name="arrow-left"/>
</sa-button>
</sa-button-group>
<sa-button-group>
<sa-button variant="ButtonVariant.Outline">Review</sa-button>
<sa-button variant="ButtonVariant.Outline">Book Again</sa-button>
</sa-button-group>
<sa-button-group>
<sa-button variant="ButtonVariant.Outline">
<sa-icon name="mail"/>
Email Hotel
</sa-button>
</sa-button-group>
</sa-button-group>Usage
Put the buttons directly inside an <sa-button-group>. The group joins their borders and radii into one control.
<sa-button-group>
<sa-button>...</sa-button>
<sa-button>...</sa-button>
</sa-button-group>Examples
Basic
Two outline buttons joined into a single segmented control.
Theme
<sa-button-group>
<sa-button variant="ButtonVariant.Outline">
Flights
</sa-button>
<sa-button variant="ButtonVariant.Outline">
Hotels
</sa-button>
</sa-button-group>Sizes
Control the size of the buttons using the size property of the individual buttons.
Theme
<sa-button-group>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Small">Small</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Small">Button</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Small">Group</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.IconSmall" aria-label="Add">
<sa-icon name="plus"/>
</sa-button>
</sa-button-group>
<sa-button-group>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Default">Default</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Default">Button</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Default">Group</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Icon" aria-label="Add">
<sa-icon name="plus"/>
</sa-button>
</sa-button-group>
<sa-button-group>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Large">Large</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Large">Button</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Large">Group</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.IconLarge" aria-label="Add">
<sa-icon name="plus"/>
</sa-button>
</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.
Theme
<sa-button-group>
<sa-button variant="ButtonVariant.Default">Review</sa-button>
<sa-button-group-separator/>
<sa-button variant="ButtonVariant.Default">Book Again</sa-button>
</sa-button-group>
<sa-button-group>
<sa-button variant="ButtonVariant.Secondary">Review</sa-button>
<sa-button-group-separator/>
<sa-button variant="ButtonVariant.Secondary">Book Again</sa-button>
</sa-button-group>With input
An <sa-input> can sit inside the group, before or after a button, and takes on the same joined borders.
Theme
<div class="flex flex-col gap-4">
<sa-button-group>
<sa-button variant="ButtonVariant.Outline">Search</sa-button>
<sa-input placeholder="Search destinations..." />
</sa-button-group>
<sa-button-group>
<sa-input placeholder="Enter promo code" />
<sa-button variant="ButtonVariant.Outline">Apply</sa-button>
</sa-button-group>
</div>With text
Use <sa-button-group-text> for a non-interactive segment such as a label or unit. It can also wrap an <sa-label> for the adjacent input.
Theme
<div class="flex flex-col gap-4">
<sa-button-group>
<sa-button-group-text>Sort by</sa-button-group-text>
<sa-button variant="ButtonVariant.Outline">Departure</sa-button>
</sa-button-group>
<sa-button-group>
<sa-button-group-text>
<sa-label for="input-text">
Booking ref
</sa-label>
</sa-button-group-text>
<sa-input id="input-text" placeholder="e.g. VT-48213"/>
</sa-button-group>
</div>With select
An <sa-select> joins the group in the same way as an input, here as a currency prefix for the amount.
Theme
<sa-field>
<sa-label for="amount">Amount</sa-label>
<sa-button-group>
<sa-button-group>
<sa-select>
<option>$</option>
<option>€</option>
<option>£</option>
</sa-select>
<sa-input id="amount" placeholder="Enter deposit amount"/>
</sa-button-group>
<sa-button-group>
<sa-button variant="ButtonVariant.Outline">
<sa-icon name="arrow-right"/>
</sa-button>
</sa-button-group>
</sa-button-group>
</sa-field>With icons
Icon-only buttons in a group make a compact toolbar.
Theme
<sa-button-group>
<sa-button variant="ButtonVariant.Outline">
<sa-icon name="square-centerline-dashed-horizontal"/>
</sa-button>
<sa-button variant="ButtonVariant.Outline" aria-label="Flip vertical">
<sa-icon name="square-centerline-dashed-vertical"/>
</sa-button>
<sa-button variant="ButtonVariant.Outline" aria-label="Rotate">
<sa-icon name="rotate-cw"/>
</sa-button>
</sa-button-group>With input group
For a single input with an addon, use an Input Group on its own. The next example joins one to buttons.
Theme
<sa-input-group>
<sa-input-group-input placeholder="Type to search..."/>
<sa-input-group-addon
align="InputGroupAddOnVariantAlignment.InlineStart"
class="text-muted-foreground">
<sa-icon name="search"/>
</sa-input-group-addon>
</sa-input-group>With fields
Wrap the group in an <sa-field> with an <sa-label> to give it a label. Here an input group with unit addons is joined to stepper buttons.
Theme
<sa-field-group class="max-w-[300px]">
<sa-field>
<sa-label for="width">Width</sa-label>
<sa-button-group>
<sa-input-group>
<sa-input-group-input id="width"/>
<sa-input-group-addon class="text-muted-foreground">
W
</sa-input-group-addon>
<sa-input-group-addon
align="InputGroupAddOnVariantAlignment.InlineEnd"
class="text-muted-foreground"
>
px
</sa-input-group-addon>
</sa-input-group>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Icon">
<sa-icon name="minus"/>
</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Icon" aria-label="Increase">
<sa-icon name="plus"/>
</sa-button>
</sa-button-group>
</sa-field>
</sa-field-group>
With like
Combine a button with <sa-button-group-text> to show a count next to the action.
Theme
<sa-button-group>
<sa-button variant="ButtonVariant.Outline">
<sa-icon name="heart"/>
Like
</sa-button>
<sa-button-group-text>
1.2K
</sa-button-group-text>
</sa-button-group>With select and input
A select and an input can be joined without any button at all.
Theme
<sa-button-group>
<sa-select>
<option>Hours</option>
<option>Days</option>
<option>Weeks</option>
</sa-select>
<sa-input />
</sa-button-group>With popover
The trailing icon button opens a Popover via popovertarget, giving a split-button style dropdown.
Theme
<sa-button-group>
<sa-button variant="ButtonVariant.Outline">
<sa-icon name="bot"/>
Trip Assistant
</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Icon" popovertarget="--popover-offset" aria-label="More options">
<sa-icon name="chevron-down"/>
</sa-button>
</sa-button-group>
<sa-popover id="--popover-offset" position="PositionArea.BottomSpanLeft">
<sa-stack gap="StackGap.Small">
<sa-popover-header>
<sa-popover-title>Ask the trip assistant</sa-popover-title>
<sa-popover-description>
Describe what you need in plain language.
</sa-popover-description>
</sa-popover-header>
<sa-field>
<sa-field-label for="--button-group-popopver-task" class="sr-only">
Request
</sa-field-label>
<sa-textarea
id="--button-group-popopver-task"
placeholder="I need to..."
class="resize-none"/>
<sa-field-description>
The assistant will draft an itinerary for you to review.
</sa-field-description>
</sa-field>
</sa-stack>
</sa-popover>Nested
You can nest button groups to create multiple groupings.
Theme
<sa-button-group>
<sa-button-group>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.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-icon name="audio-lines"/>
</sa-input-group-addon>
</sa-input-group>
</sa-button-group>
</sa-button-group>Pagination
Small outline buttons in a group make a compact pager.
Theme
<sa-button-group>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
<sa-icon name="arrow-left"/>
Previous
</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
1
</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
2
</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
3
</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
4
</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
5
</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
Next
<sa-icon name="arrow-right"/>
</sa-button>
</sa-button-group>Pagination split
Nest groups inside a group to split the pager into separately bordered segments.
Theme
<sa-button-group>
<sa-button-group>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
1
</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
2
</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
3
</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
4
</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
5
</sa-button>
</sa-button-group>
<sa-button-group>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.IconExtraSmall">
<sa-icon name="arrow-left"/>
</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.IconExtraSmall" aria-label="Next">
<sa-icon name="arrow-right"/>
</sa-button>
</sa-button-group>
</sa-button-group>Vertical
Use the orientation property to switch to a vertical layout.
Theme
<sa-button-group orientation="ButtonGroupOrientation.Vertical" aria-label="Media controls" class="h-fit">
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Icon">
<sa-icon name="plus"/>
</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Icon" aria-label="Decrease">
<sa-icon name="minus"/>
</sa-button>
</sa-button-group>Vertical nested
Vertical groups can be nested too, giving a stacked toolbar with a gap between the sections.
Theme
<sa-button-group orientation="ButtonGroupOrientation.Vertical" aria-label="Design tools palette">
<sa-button-group orientation="ButtonGroupOrientation.Vertical">
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Icon">
<sa-icon name="search" />
</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Icon" aria-label="Copy">
<sa-icon name="copy" />
</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Icon" aria-label="Share">
<sa-icon name="share" />
</sa-button>
</sa-button-group>
<sa-button-group orientation="ButtonGroupOrientation.Vertical">
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Icon">
<sa-icon name="square-centerline-dashed-horizontal" />
</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Icon" aria-label="Flip vertical">
<sa-icon name="square-centerline-dashed-vertical" />
</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Icon" aria-label="Rotate">
<sa-icon name="rotate-cw" />
</sa-button>
</sa-button-group>
<sa-button-group>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Icon">
<sa-icon name="trash" />
</sa-button>
</sa-button-group>
</sa-button-group>Accessibility
<sa-button-group> renders a <div role="group">. Give it an aria-label that describes the set of actions, and give every icon-only button inside it an accessible name with aria-label or a <span class="sr-only">. The buttons themselves keep their native focus and keyboard behaviour.
API Reference
<sa-button-group>
The wrapper element that groups related buttons. Renders a <div role="group">.
Prop
Type
<sa-button-group-separator>
An optional divider placed between buttons in a group. Renders a separator and takes no attributes other than orientation.
Prop
Type
<sa-button-group-text>
Wraps inline text or labels within a button group. Renders a <div> and takes no additional attributes beyond the standard HTML attributes (such as class).