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
<sa-button-group>
<sa-button>...</sa-button>
<sa-button>...</sa-button>
</sa-button-group>Examples
Basic
Theme
<sa-button-group>
<sa-button variant="ButtonVariant.Outline">
Button
</sa-button>
<sa-button variant="ButtonVariant.Outline">
Another Button
</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">
<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">
<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">
<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
Theme
<div class="flex flex-col gap-4">
<sa-button-group>
<sa-button variant="ButtonVariant.Outline">Button</sa-button>
<sa-input placeholder="Type something here..." />
</sa-button-group>
<sa-button-group>
<sa-input placeholder="Type something here..." />
<sa-button variant="ButtonVariant.Outline">Button</sa-button>
</sa-button-group>
</div>With Text
Theme
<div class="flex flex-col gap-4">
<sa-button-group>
<sa-button-group-text>Text</sa-button-group-text>
<sa-button variant="ButtonVariant.Outline">Another Button</sa-button>
</sa-button-group>
<sa-button-group>
<sa-button-group-text>
<sa-label for="input-text">
GPU Size
</sa-label>
</sa-button-group-text>
<sa-input id="input-text" placeholder="Type something here..."/>
</sa-button-group>
</div>With Select
Theme
<sa-field>
<sa-label for="amount">Amount</sa-label>
<sa-button-group>
<sa-select>
<option>$</option>
<option>€</option>
<option>£</option>
</sa-select>
<sa-input id="amount" placeholder="Enter amount to send"/>
<sa-button variant="ButtonVariant.Outline">
<sa-icon name="arrow-right"/>
</sa-button>
</sa-button-group>
</sa-field>With Icons
Theme
<sa-button-group>
<sa-button variant="ButtonVariant.Outline">
<sa-icon name="flip-horizontal"/>
</sa-button>
<sa-button variant="ButtonVariant.Outline">
<sa-icon name="flip-vertical"/>
</sa-button>
<sa-button variant="ButtonVariant.Outline">
<sa-icon name="rotate-cw"/>
</sa-button>
</sa-button-group>With Input Group
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
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">
<sa-icon name="plus"/>
</sa-button>
</sa-button-group>
</sa-field>
</sa-field-group>
With Like
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
Theme
<sa-button-group>
<sa-select>
<option>Hours</option>
<option>Days</option>
<option>Weeks</option>
</sa-select>
<sa-input />
</sa-button-group>With Popover
Theme
<sa-button-group>
<sa-button variant="ButtonVariant.Outline">
<sa-icon name="bot"/>
Copilot
</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Icon" popovertarget="--popover-offset">
<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>Start a new task with Copilot</sa-popover-title>
<sa-popover-description>
Describe your task in natural language.
</sa-popover-description>
</sa-popover-header>
<sa-field>
<sa-field-label for="--button-group-popopver-task" class="sr-only">
Task Description
</sa-field-label>
<sa-textarea
id="--button-group-popopver-task"
placeholder="I need to..."
class="resize-none"/>
<sa-field-description>
Copilot will open a pull request for 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
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
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">
<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">
<sa-icon name="minus"/>
</sa-button>
</sa-button-group>Vertical Nested
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">
<sa-icon name="copy" />
</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Icon">
<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="flip-horizontal" />
</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Icon">
<sa-icon name="flip-vertical" />
</sa-button>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Icon">
<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>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).