ButtonGroup

Button groups keep a related set of options visually connected while preserving single- or multi-selection behavior.

Option 1Option 2Option 3

Anatomy

Highlight

Element	Part	Selector
<SelectionGroup>	root	[data-scope="button-group"][data-part="root"] left_clickLMBCopy

Props

Name	Description	Default	Control
disabledOptional	- boolean | undefined	false
selectionModeOptional	- singlemultiple	"single"	checksinglemultiple
nameOptional	- string | undefined	-	-
ariaLabelOptional	- string | undefined	-	-
typeOptional	- standardconnected	"standard"	checkstandardconnected
sizeOptional	- smalllargeextra-smallmediumextra-large	"small"	checksmalllargeextra-smallmediumextra-large
colorOptional	- elevatedfilledtonaloutlinedtext	"tonal"	elevatedfilledchecktonaloutlinedtext
pressShapeMorphOptional	- boolean | undefined	true
modelValueOptional	- SelectionGroupModelValue	-	-

Events1

Name	Type	Description
update:modelValue	[value: SelectionGroupModelValue]	-

Slots1

Name	Parameters	Description
default	-	-

Styling61

Preview

Token	Description
--md-button-group-between-spaceLayout Fallbackvar(--md-button-group-standard-medium-between-space,0.5rem)	Controls between space.
--md-button-group-connected-container-shapeShape Fallbackvar(--md-button-group-connected-medium-container-shape,var(--md-shape-action))	Controls connected container shape.
--md-button-group-connected-inner-corner-corner-sizeShape Fallbackvar(--md-button-group-connected-medium-inner-corner-corner-size,var(--md-sys-shape-corner-value-small))	Controls connected inner corner corner size.
--md-button-group-connected-large-between-spaceLayout Fallback0.125rem	Controls connected large between space.
--md-button-group-connected-large-container-heightLayout Fallback6rem	Controls connected large container height.
--md-button-group-connected-large-container-shapeShape Fallbackvar(--md-shape-action)	Controls connected large container shape.
--md-button-group-connected-large-inner-corner-corner-sizeShape Fallbackvar(--md-sys-shape-corner-value-large)	Controls connected large inner corner corner size.
--md-button-group-connected-large-pressed-inner-corner-corner-sizeShape Fallbackvar(--md-sys-shape-corner-value-medium)	Controls connected large pressed inner corner corner size.
--md-button-group-connected-large-selected-inner-corner-corner-sizeShape Fallbackvar(--md-shape-action)	Controls connected large selected inner corner corner size.
--md-button-group-connected-medium-between-spaceLayout Fallback0.125rem	Controls connected medium between space.
--md-button-group-connected-medium-container-heightLayout Fallback3.5rem	Controls connected medium container height.
--md-button-group-connected-medium-container-shapeShape Fallbackvar(--md-shape-action)	Controls connected medium container shape.
--md-button-group-connected-medium-inner-corner-corner-sizeShape Fallbackvar(--md-sys-shape-corner-value-small)	Controls connected medium inner corner corner size.
--md-button-group-connected-medium-pressed-inner-corner-corner-sizeShape Fallbackvar(--md-sys-shape-corner-value-extra-small)	Controls connected medium pressed inner corner corner size.
--md-button-group-connected-medium-selected-inner-corner-corner-sizeShape Fallbackvar(--md-shape-action)	Controls connected medium selected inner corner corner size.
--md-button-group-connected-pressed-inner-corner-corner-sizeShape Fallbackvar(--md-button-group-connected-medium-pressed-inner-corner-corner-size,var(--md-sys-shape-corner-value-extra-small))	Controls connected pressed inner corner corner size.
--md-button-group-connected-selected-inner-corner-corner-sizeShape Fallbackvar(--md-button-group-connected-medium-selected-inner-corner-corner-size,var(--md-shape-action))	Controls connected selected inner corner corner size.
--md-button-group-connected-small-between-spaceLayout Fallback0.125rem	Controls connected small between space.
--md-button-group-connected-small-container-heightLayout Fallback2.5rem	Controls connected small container height.
--md-button-group-connected-small-container-shapeShape Fallbackvar(--md-shape-action)	Controls connected small container shape.
--md-button-group-connected-small-inner-corner-corner-sizeShape Fallbackvar(--md-sys-shape-corner-value-small)	Controls connected small inner corner corner size.
--md-button-group-connected-small-pressed-inner-corner-corner-sizeShape Fallbackvar(--md-sys-shape-corner-value-extra-small)	Controls connected small pressed inner corner corner size.
--md-button-group-connected-small-selected-inner-corner-corner-sizeShape Fallbackvar(--md-shape-action)	Controls connected small selected inner corner corner size.
--md-button-group-connected-xlarge-between-spaceLayout Fallback0.125rem	Controls connected xlarge between space.
--md-button-group-connected-xlarge-container-heightLayout Fallback8.5rem	Controls connected xlarge container height.
--md-button-group-connected-xlarge-container-shapeShape Fallbackvar(--md-shape-action)	Controls connected xlarge container shape.
--md-button-group-connected-xlarge-inner-corner-corner-sizeShape Fallbackvar(--md-sys-shape-corner-value-large-increased)	Controls connected xlarge inner corner corner size.
--md-button-group-connected-xlarge-pressed-inner-corner-corner-sizeShape Fallbackvar(--md-sys-shape-corner-value-large)	Controls connected xlarge pressed inner corner corner size.
--md-button-group-connected-xlarge-selected-inner-corner-corner-sizeShape Fallbackvar(--md-shape-action)	Controls connected xlarge selected inner corner corner size.
--md-button-group-connected-xsmall-between-spaceLayout Fallback0.125rem	Controls connected xsmall between space.
--md-button-group-connected-xsmall-container-heightLayout Fallback2rem	Controls connected xsmall container height.
--md-button-group-connected-xsmall-container-shapeShape Fallbackvar(--md-shape-action)	Controls connected xsmall container shape.
--md-button-group-connected-xsmall-inner-corner-corner-sizeShape Fallbackvar(--md-sys-shape-corner-value-small)	Controls connected xsmall inner corner corner size.
--md-button-group-connected-xsmall-pressed-inner-corner-corner-sizeShape Fallbackvar(--md-sys-shape-corner-value-extra-small)	Controls connected xsmall pressed inner corner corner size.
--md-button-group-connected-xsmall-selected-inner-corner-corner-sizeShape Fallbackvar(--md-shape-action)	Controls connected xsmall selected inner corner corner size.
--md-button-group-heightLayout Fallbackinitial	Controls height.
--md-button-group-standard-large-between-spaceLayout Fallback0.5rem	Controls standard large between space.
--md-button-group-standard-large-container-heightLayout Fallback6rem	Controls standard large container height.
--md-button-group-standard-large-pressed-item-width-motion-spring-dampeningMotion Fallbackvar(--md-sys-motion-spring-fast-spatial-damping)	Controls standard large pressed item width motion spring dampening.
--md-button-group-standard-large-pressed-item-width-motion-spring-stiffnessMotion Fallbackvar(--md-sys-motion-spring-fast-spatial-stiffness)	Controls standard large pressed item width motion spring stiffness.
--md-button-group-standard-large-pressed-item-width-multiplierState Fallback15%	Controls standard large pressed item width multiplier.
--md-button-group-standard-medium-between-spaceLayout Fallback0.5rem	Controls standard medium between space.
--md-button-group-standard-medium-container-heightLayout Fallback3.5rem	Controls standard medium container height.
--md-button-group-standard-medium-pressed-item-width-motion-spring-dampeningMotion Fallbackvar(--md-sys-motion-spring-fast-spatial-damping)	Controls standard medium pressed item width motion spring dampening.
--md-button-group-standard-medium-pressed-item-width-motion-spring-stiffnessMotion Fallbackvar(--md-sys-motion-spring-fast-spatial-stiffness)	Controls standard medium pressed item width motion spring stiffness.
--md-button-group-standard-medium-pressed-item-width-multiplierState Fallback15%	Controls standard medium pressed item width multiplier.
--md-button-group-standard-small-between-spaceLayout Fallback0.75rem	Controls standard small between space.
--md-button-group-standard-small-container-heightLayout Fallback2.5rem	Controls standard small container height.
--md-button-group-standard-small-pressed-item-width-motion-spring-dampeningMotion Fallbackvar(--md-sys-motion-spring-fast-spatial-damping)	Controls standard small pressed item width motion spring dampening.
--md-button-group-standard-small-pressed-item-width-motion-spring-stiffnessMotion Fallbackvar(--md-sys-motion-spring-fast-spatial-stiffness)	Controls standard small pressed item width motion spring stiffness.
--md-button-group-standard-small-pressed-item-width-multiplierState Fallback15%	Controls standard small pressed item width multiplier.
--md-button-group-standard-xlarge-between-spaceLayout Fallback0.5rem	Controls standard xlarge between space.
--md-button-group-standard-xlarge-container-heightLayout Fallback8.5rem	Controls standard xlarge container height.
--md-button-group-standard-xlarge-pressed-item-width-motion-spring-dampeningMotion Fallbackvar(--md-sys-motion-spring-fast-spatial-damping)	Controls standard xlarge pressed item width motion spring dampening.
--md-button-group-standard-xlarge-pressed-item-width-motion-spring-stiffnessMotion Fallbackvar(--md-sys-motion-spring-fast-spatial-stiffness)	Controls standard xlarge pressed item width motion spring stiffness.
--md-button-group-standard-xlarge-pressed-item-width-multiplierState Fallback15%	Controls standard xlarge pressed item width multiplier.
--md-button-group-standard-xsmall-between-spaceLayout Fallback1.125rem	Controls standard xsmall between space.
--md-button-group-standard-xsmall-container-heightLayout Fallback2rem	Controls standard xsmall container height.
--md-button-group-standard-xsmall-pressed-item-width-motion-spring-dampeningMotion Fallbackvar(--md-sys-motion-spring-fast-spatial-damping)	Controls standard xsmall pressed item width motion spring dampening.
--md-button-group-standard-xsmall-pressed-item-width-motion-spring-stiffnessMotion Fallbackvar(--md-sys-motion-spring-fast-spatial-stiffness)	Controls standard xsmall pressed item width motion spring stiffness.
--md-button-group-standard-xsmall-pressed-item-width-multiplierState Fallback15%	Controls standard xsmall pressed item width multiplier.

Examples

Default

Option 1Option 2Option 3

Types

standard

Option 1Option 2Option 3

connected

Option 1Option 2Option 3

Sizes

extra-small

Option 1Option 2Option 3

small

Option 1Option 2Option 3

medium

Option 1Option 2Option 3

large

Option 1Option 2Option 3

extra-large

Option 1Option 2Option 3

Colors

filled

Option 1Option 2Option 3

tonal

Option 1Option 2Option 3

outlined

Option 1Option 2Option 3

text

Option 1Option 2Option 3

Disabled

Option 1Option 2Option 3

Multiple Selection

Option 1Option 2Option 3

API

ButtonGroupItem

Props

Name	Description	Default
valueRequired	- SelectionGroupValue	-
disabledOptional	- boolean | undefined	false
ariaLabelOptional	- string | undefined	-

Events0

No events documented.

Slots1

Name	Parameters	Description
default	-	-