Component

Material Design 3 button groups tokens

Browse tokens

TokenValue
Enabled
Large
Large tokens
TokenValue
Button group connected large space between buttonsmd.comp.button-group.connected.large.between-space
md.sys.measurement.space25Show reference chainHide reference chain
md.comp.button-group.connected.large.between-space
  • md.sys.measurement.space25
2dp
Button group connected large container shapemd.comp.button-group.connected.large.container.shape
md.sys.shape.corner.fullShow reference chainHide reference chain
md.comp.button-group.connected.large.container.shape
  • md.sys.shape.corner.full
Circular
Container
Container tokens
TokenValue
Button group connected large container heightmd.comp.button-group.connected.large.container.height96dp
Inner Corner
Inner Corner tokens
TokenValue
Button group connected large inner corner sizemd.comp.button-group.connected.large.inner-corner.corner-size
md.sys.shape.corner-value.largeShow reference chainHide reference chain
md.comp.button-group.connected.large.inner-corner.corner-size
  • md.sys.shape.corner-value.large
16dp
Selected
Inner Corner
Inner Corner tokens
TokenValue
Button group connected large selected inner corner sizemd.comp.button-group.connected.large.selected.inner-corner.corner-size50PERCENT
Medium
Medium tokens
TokenValue
Button group connected medium space between buttonsmd.comp.button-group.connected.medium.between-space
md.sys.measurement.space25Show reference chainHide reference chain
md.comp.button-group.connected.medium.between-space
  • md.sys.measurement.space25
2dp
Button group connected medium container shapemd.comp.button-group.connected.medium.container.shape
md.sys.shape.corner.fullShow reference chainHide reference chain
md.comp.button-group.connected.medium.container.shape
  • md.sys.shape.corner.full
Circular
Container
Container tokens
TokenValue
Button group connected medium container heightmd.comp.button-group.connected.medium.container.height56dp
Inner Corner
Inner Corner tokens
TokenValue
Button group connected medium inner corner sizemd.comp.button-group.connected.medium.inner-corner.corner-size
md.sys.shape.corner-value.smallShow reference chainHide reference chain
md.comp.button-group.connected.medium.inner-corner.corner-size
  • md.sys.shape.corner-value.small
8dp
Selected
Inner Corner
Inner Corner tokens
TokenValue
Button group connected medium selected inner corner sizemd.comp.button-group.connected.medium.selected.inner-corner.corner-size50PERCENT
Small
Small tokens
TokenValue
Button group connected small space between buttonsmd.comp.button-group.connected.small.between-space
md.sys.measurement.space25Show reference chainHide reference chain
md.comp.button-group.connected.small.between-space
  • md.sys.measurement.space25
2dp
Button group connected small container shapemd.comp.button-group.connected.small.container.shape
md.sys.shape.corner.fullShow reference chainHide reference chain
md.comp.button-group.connected.small.container.shape
  • md.sys.shape.corner.full
Circular
Container
Container tokens
TokenValue
Button group connected small container heightmd.comp.button-group.connected.small.container.height40dp
Inner Corner
Inner Corner tokens
TokenValue
Button group connected small inner corner sizemd.comp.button-group.connected.small.inner-corner.corner-size
md.sys.shape.corner-value.smallShow reference chainHide reference chain
md.comp.button-group.connected.small.inner-corner.corner-size
  • md.sys.shape.corner-value.small
8dp
Selected
Inner Corner
Inner Corner tokens
TokenValue
Button group connected small selected inner corner sizemd.comp.button-group.connected.small.selected.inner-corner.corner-size50PERCENT
Xlarge
Xlarge tokens
TokenValue
Button group connected xlarge space between buttonsmd.comp.button-group.connected.xlarge.between-space
md.sys.measurement.space25Show reference chainHide reference chain
md.comp.button-group.connected.xlarge.between-space
  • md.sys.measurement.space25
2dp
Button group connected xlarge container shapemd.comp.button-group.connected.xlarge.container.shape
md.sys.shape.corner.fullShow reference chainHide reference chain
md.comp.button-group.connected.xlarge.container.shape
  • md.sys.shape.corner.full
Circular
Container
Container tokens
TokenValue
Button group connected xlarge container heightmd.comp.button-group.connected.xlarge.container.height136dp
Inner Corner
Inner Corner tokens
TokenValue
Button group connected xlarge inner corner sizemd.comp.button-group.connected.xlarge.inner-corner.corner-size
md.sys.shape.corner-value.large-increasedShow reference chainHide reference chain
md.comp.button-group.connected.xlarge.inner-corner.corner-size
  • md.sys.shape.corner-value.large-increased
20dp
Selected
Inner Corner
Inner Corner tokens
TokenValue
Button group connected xlarge selected inner corner sizemd.comp.button-group.connected.xlarge.selected.inner-corner.corner-size50PERCENT
Xsmall
Xsmall tokens
TokenValue
Button group connected xsmall space between buttonsmd.comp.button-group.connected.xsmall.between-space
md.sys.measurement.space25Show reference chainHide reference chain
md.comp.button-group.connected.xsmall.between-space
  • md.sys.measurement.space25
2dp
Button group connected xsmall container shapemd.comp.button-group.connected.xsmall.container.shape
md.sys.shape.corner.fullShow reference chainHide reference chain
md.comp.button-group.connected.xsmall.container.shape
  • md.sys.shape.corner.full
Circular
Container
Container tokens
TokenValue
Button group connected xsmall container heightmd.comp.button-group.connected.xsmall.container.height32dp
Inner Corner
Inner Corner tokens
TokenValue
Button group connected xsmall inner corner sizemd.comp.button-group.connected.xsmall.inner-corner.corner-size
md.sys.shape.corner-value.smallShow reference chainHide reference chain
md.comp.button-group.connected.xsmall.inner-corner.corner-size
  • md.sys.shape.corner-value.small
8dp
Selected
Inner Corner
Inner Corner tokens
TokenValue
Button group connected xsmall selected inner corner sizemd.comp.button-group.connected.xsmall.selected.inner-corner.corner-size50PERCENT
Pressed
Large
Inner Corner
Inner Corner tokens
TokenValue
Button group connected large pressed inner corner sizemd.comp.button-group.connected.large.pressed.inner-corner.corner-size
md.sys.shape.corner-value.mediumShow reference chainHide reference chain
md.comp.button-group.connected.large.pressed.inner-corner.corner-size
  • md.sys.shape.corner-value.medium
12dp
Medium
Inner Corner
Inner Corner tokens
TokenValue
Button group connected medium pressed inner corner sizemd.comp.button-group.connected.medium.pressed.inner-corner.corner-size
md.sys.shape.corner-value.extra-smallShow reference chainHide reference chain
md.comp.button-group.connected.medium.pressed.inner-corner.corner-size
  • md.sys.shape.corner-value.extra-small
4dp
Small
Inner Corner
Inner Corner tokens
TokenValue
Button group connected small pressed inner corner sizemd.comp.button-group.connected.small.pressed.inner-corner.corner-size
md.sys.shape.corner-value.extra-smallShow reference chainHide reference chain
md.comp.button-group.connected.small.pressed.inner-corner.corner-size
  • md.sys.shape.corner-value.extra-small
4dp
Xlarge
Inner Corner
Inner Corner tokens
TokenValue
Button group connected xlarge pressed inner corner sizemd.comp.button-group.connected.xlarge.pressed.inner-corner.corner-size
md.sys.shape.corner-value.largeShow reference chainHide reference chain
md.comp.button-group.connected.xlarge.pressed.inner-corner.corner-size
  • md.sys.shape.corner-value.large
16dp
Xsmall
Inner Corner
Inner Corner tokens
TokenValue
Button group connected xsmall pressed inner corner sizemd.comp.button-group.connected.xsmall.pressed.inner-corner.corner-size
md.sys.shape.corner-value.extra-smallShow reference chainHide reference chain
md.comp.button-group.connected.xsmall.pressed.inner-corner.corner-size
  • md.sys.shape.corner-value.extra-small
4dp