Button Group

SButtonGroup joins several SButton into one control: attached buttons share their edges, and the appearance props set on the group (size, variant, color, square, round, disabled) become the defaults of every button inside, so a button that sets the prop itself still wins. The root carries role="group"; give it a label when the set of actions needs a name of its own.

Attached buttons

<template>
  <SButtonGroup label="Text actions">
    <SButton>Copy</SButton>
    <SButton>Cut</SButton>
    <SButton>Paste</SButton>
  </SButtonGroup>
</template>

Shared appearance

The group props reach every button. Here the whole group is outline and sm, while the last button sets its own variant.

<template>
  <SButtonGroup
    variant="outline"
    size="sm"
    label="Row status"
  >
    <SButton>Draft</SButton>
    <SButton>Review</SButton>
    <SButton variant="primary">Publish</SButton>
  </SButtonGroup>
</template>

Vertical and detached

orientation="vertical" stacks the buttons. :attached="false" keeps every button's own shape and spaces them out instead.

<template>
  <SButtonGroup
    orientation="vertical"
    variant="outline"
    label="Sorting"
  >
    <SButton icon="chevron-up">Up</SButton>
    <SButton icon="chevron-down">Down</SButton>
  </SButtonGroup>

  <SButtonGroup
    :attached="false"
    label="Form actions"
  >
    <SButton variant="ghost">Cancel</SButton>
    <SButton>Save</SButton>
  </SButtonGroup>
</template>

Shape and color

round and square apply to the whole group: the outer corners follow the button shape, the inner ones always collapse. color takes a name from the palette.

<template>
  <SButtonGroup
    round
    color="teal"
    label="Zoom"
  >
    <SButton
      icon="minus"
      aria-label="Zoom out"
    />
    <SButton>100%</SButton>
    <SButton
      icon="plus"
      aria-label="Zoom in"
    />
  </SButtonGroup>
</template>

API

Props

Name	Type	Default	Description
orientation	"horizontal" | "vertical"	"horizontal"	Direction the buttons are laid out in: side by side or stacked.
attached	boolean	true	Buttons share an edge: inner corners are flattened and neighbouring borders collapse into a single line. Turn it off to keep each button's own shape and space them out instead.
label	string	undefined	Accessible name of the group (aria-label). Without it the group stays unnamed.
size	"md" | "sm" | "lg"	undefined	Size of every button in the group; a size set on a button itself wins.
variant	| "primary" | "secondary" | "negative" | "outline" | "ghost"	undefined	Variant of every button in the group; a variant set on a button itself wins.
color	string	undefined	Accent color of every button in the group: a name from the palette (primary/teal/teal-10). A color set on a button itself wins.
square	boolean	undefined	Square corners on every button in the group; a square set on a button itself wins.
round	boolean	undefined	Pill shape on every button in the group; a round set on a button itself wins.
disabled	boolean	undefined	Disables every button in the group; a disabled set on a button itself wins.

Slots

Name	Description
default	Buttons of the group (SButton).