Button Group

Join related buttons into a single group of actions.

<sy-button-group>Installation guide Basic usage

Live preview

Interact with the component to see results here.

StylesSize

Vertical layout

View code

HTML

<sy-button-group variant="default" size="medium">
  <sy-button>Previous</sy-button>
  <sy-button>Current</sy-button>
  <sy-button>Next</sy-button>
</sy-button-group>

Usage guide

Use to group related actions, such as previous/next or alignment tools. To store a single selected value, use button-style Radio instead.

Shared group settings: size and variant are passed to child Buttons. Use vertical for a vertical layout.
Individual button settings: Set disabled and tooltip on each Button.

Examples

Horizontal group

Arrange actions from the same workflow in a row.

View code

HTML

<sy-button-group variant="primary">
  <sy-button>Previous</sy-button>
  <sy-button>Next</sy-button>
</sy-button-group>

Vertical group

Use vertical to stack buttons in a narrow toolbar.

View code

HTML

<sy-button-group vertical>
  <sy-button>Zoom in</sy-button>
  <sy-button>Original size</sy-button>
  <sy-button>Zoom out</sy-button>
</sy-button-group>

Size

Manage the size of child buttons from the group.

View code

HTML

<div style="display:grid;gap:16px;width:100%">
  <sy-button-group size="small">
    <sy-button>small</sy-button>
    <sy-button>Next</sy-button>
  </sy-button-group>
  <sy-button-group size="medium">
    <sy-button>medium</sy-button>
    <sy-button>Next</sy-button>
  </sy-button-group>
  <sy-button-group size="large">
    <sy-button>large</sy-button>
    <sy-button>Next</sy-button>
  </sy-button-group>
</div>

Disable individual actions

Set disabled only on actions that are unavailable.

View code

HTML

<sy-button-group>
  <sy-button>Undo</sy-button>
  <sy-button disabled>Redo</sy-button>
</sy-button-group>

Feature examples

Choose a feature from 4 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.

Property · Size

See how settings change appearance and behavior.

View code

HTML

Loading the example.

Property · Variant

See how settings change appearance and behavior.

View code

HTML

Loading the example.

Property · Vertical

See how settings change appearance and behavior.

View code

HTML

Loading the example.

API reference

Hover over a name or focus it with the keyboard to see the code. On touch screens, tap the name.

`<sy-button-group>`

Properties

Type	Default	Description
`boolean`	`false`	Arrange vertically.
`'default' \| 'primary' \| 'secondary' \| 'borderless'`	`'default'`	Component display style.
`'small' \| 'medium' \| 'large'`	`'medium'`	Component size.

Slots

Slot	Description
	Component body or child items.