Button Group

Button groups keep related actions visually connected so compound controls read as one unit.

Basic Usage

Use a button group when several adjacent actions belong to the same workflow. End a Craft-style toolbar with groupTrigger for the disclosure control — not a slotted chevron icon.

Menu Trigger (groupTrigger)

A split toolbar is just labeled actions plus a disclosure end-cap. groupTrigger is the attribute on that end-cap (Craft .menubtn): narrow padding and a CSS chevron. Do not slot chevron-down — that keeps a full square hit target.

Separators

Separators are on by default — a 1px divider between joined controls. Set separators="false" for a flush join.

Split Actions

Split-button patterns keep the primary action obvious while still exposing closely related secondary options. The end-cap uses groupTrigger.

Sizes

Button groups should scale cleanly with the shared button size system so they can fit toolbars and denser control areas.

Orientation

Vertical orientation keeps related actions grouped when horizontal space is limited or the controls need to read more like a menu.

Other Controls

Button groups can combine buttons with adjacent fields and overlays when the control should still read as one compact action bar.

Dropdown

Dropdown triggers work well at the end of a group when the primary action remains visible but secondary actions need extra space. Use groupTrigger on the menu’s trigger button.

Popover

Popover triggers work well when a grouped action needs lightweight supporting content instead of a menu. Same pattern: groupTrigger on the trigger, no chevron icon.

API

Slots

Name	Description
(default)	Buttons, toolbars, and overlay triggers

Props

Name	Description
exclusive	Exclusive icon/text toggle styling — Craft .btngroup--exclusive. Use with pk-toggle items for view-mode pickers. Type boolean Default false
label	Accessible label for the group — pk-button-group.label. Type string
orientation	Type PkButtonGroupOrientation Default horizontal
separators	Draw 1px dividers between adjacent controls (Craft default). Set separators="false" for flush join. Explicit pk-button-group-separator elements always work for segment splits. Type boolean Default true

CSS Parts

Name	Description	CSS selector
base	Group container	::part(base)