Button Group

A container that groups related buttons together with consistent styling. Use ghost buttons inside: the group draws the shared outline and clips the corners (slot children cannot be restyled).

Usage

SButtonGroup() {
  SButton({ variant: 'ghost', text: 'Archive' })
  SButtonGroupSeparator()
  SButton({ variant: 'ghost', text: 'Report' })
  SButtonGroupSeparator()
  SButton({ variant: 'ghost', sizing: 'icon', icon: 'ellipsis', label: 'More' })
}

Approximate web preview — the HarmonyOS rendering is the reference.

Orientation & borderless

SButtonGroup({ orientation: 'vertical' }) {
  SButton({ variant: 'ghost', sizing: 'icon', icon: 'plus', label: 'Zoom in' })
  SButtonGroupSeparator()
  SButton({ variant: 'ghost', sizing: 'icon', icon: 'minus', label: 'Zoom out' })
}
// borderless group of filled buttons
SButtonGroup({ outlined: false }) {
  SButton({ text: 'Merge' })
  SButtonGroupSeparator()
  SButton({ sizing: 'icon', icon: 'chevron-down', label: 'More options' })
}

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SButtonGroup

shadcn-vue ButtonGroup: buttons visually joined into one control.

Limitations: ArkUI cannot restyle the children of a slot, so the group cannot strip the inner corners / borders of each SButton the way shadcn's [&>*:not(:first-child)]:rounded-l-none does. Instead the group removes the gaps, clips its children to one rounded shape and (when outlined) draws the shared outline and shadow itself. Use ghost (or borderless) buttons inside an outlined group and place SButtonGroupSeparator between them; outline buttons would show doubled borders.

Prop	Type	Default	Description
orientation	ButtonGroupOrientation ButtonGroupOrientation = 'horizontal' | 'vertical'	'horizontal'
outlined	boolean	true	Draw the shared border shadow-xs outline (like a group of outline buttons).

Slots: children (trailing closure)

SButtonGroupSeparator

A 1vp divider between grouped buttons (bg-input), spanning the group's cross axis.

No props.