Buttons

Segmented button

Present a small set of related, mutually comparable options in one connected control — pick one, or toggle several.

Playground

Configure the group and copy synchronized Vue markup.

Properties

Color

Multiple

Disabled

Vue

<m-button-segmented
  v-model="period"
  :items="periods"
  color="secondary"
/>

Token map

Container, segment, and selected-scheme tokens with their component-to-system dependencies.

Search tokens

MButtonSegmented · All52 tokens

md-segmented-button

md-button-container-gapg($t, 'container-gap')

Resolved value8rem

md-button-container-padding-inlineg($t, 'container-padding-inline')

Resolved value24rem

md-button-container-padding-with-icong($t, 'container-padding-with-icon')

Resolved value16rem

md-button-container-padding-icon-onlyg($t, 'container-padding-icon-only')

Resolved value8rem

md-button-container-padding-text-inlineg($t, 'container-padding-text-inline')

Resolved value12rem

md-segmented-button-segment-padding-inlineg($t, 'segment-padding-inline')

Resolved value12rem

md-segmented-button-segment-gapg($t, 'segment-gap')

Resolved value8rem

md-button-primary-filled-container-colorg($t, 'primary-filled-container-color')

System token--md-sys-color-primary

md-button-primary-filled-label-text-colorg($t, 'primary-filled-label-text-color')

System token--md-sys-color-on-primary

md-button-primary-elevated-container-colorg($t, 'primary-elevated-container-color')

System token--md-sys-color-surface-container-low

md-button-primary-elevated-label-text-colorg($t, 'primary-elevated-label-text-color')

System token--md-sys-color-primary

md-button-primary-tonal-container-colorg($t, 'primary-tonal-container-color')

System token--md-sys-color-primary-container

md-button-primary-tonal-label-text-colorg($t, 'primary-tonal-label-text-color')

System token--md-sys-color-on-primary-container

md-button-primary-outlined-outline-colorg($t, 'primary-outlined-outline-color')

System token--md-sys-color-outline

md-button-primary-outlined-label-text-colorg($t, 'primary-outlined-label-text-color')

System token--md-sys-color-primary

md-button-primary-text-label-text-colorg($t, 'primary-text-label-text-color')

System token--md-sys-color-primary

md-button-secondary-filled-container-colorg($t, 'secondary-filled-container-color')

System token--md-sys-color-secondary

md-button-secondary-filled-label-text-colorg($t, 'secondary-filled-label-text-color')

System token--md-sys-color-on-secondary

md-button-secondary-elevated-container-colorg($t, 'secondary-elevated-container-color')

System token--md-sys-color-surface-container-low

md-button-secondary-elevated-label-text-colorg($t, 'secondary-elevated-label-text-color')

System token--md-sys-color-secondary

md-button-secondary-tonal-container-colorg($t, 'secondary-tonal-container-color')

System token--md-sys-color-secondary-container

md-button-secondary-tonal-label-text-colorg($t, 'secondary-tonal-label-text-color')

System token--md-sys-color-on-secondary-container

md-button-secondary-outlined-outline-colorg($t, 'secondary-outlined-outline-color')

Resolved valuecolor-mix(secondary 50%, transparent)

md-button-secondary-outlined-label-text-colorg($t, 'secondary-outlined-label-text-color')

System token--md-sys-color-secondary

md-button-secondary-text-label-text-colorg($t, 'secondary-text-label-text-color')

System token--md-sys-color-secondary

md-button-tertiary-filled-container-colorg($t, 'tertiary-filled-container-color')

System token--md-sys-color-tertiary

md-button-tertiary-filled-label-text-colorg($t, 'tertiary-filled-label-text-color')

System token--md-sys-color-on-tertiary

md-button-tertiary-elevated-container-colorg($t, 'tertiary-elevated-container-color')

System token--md-sys-color-surface-container-low

md-button-tertiary-elevated-label-text-colorg($t, 'tertiary-elevated-label-text-color')

System token--md-sys-color-tertiary

md-button-tertiary-tonal-container-colorg($t, 'tertiary-tonal-container-color')

System token--md-sys-color-tertiary-container

md-button-tertiary-tonal-label-text-colorg($t, 'tertiary-tonal-label-text-color')

System token--md-sys-color-on-tertiary-container

md-button-tertiary-outlined-outline-colorg($t, 'tertiary-outlined-outline-color')

Resolved valuecolor-mix(tertiary 50%, transparent)

md-button-tertiary-outlined-label-text-colorg($t, 'tertiary-outlined-label-text-color')

System token--md-sys-color-tertiary

md-button-tertiary-text-label-text-colorg($t, 'tertiary-text-label-text-color')

System token--md-sys-color-tertiary

md-button-error-filled-container-colorg($t, 'error-filled-container-color')

System token--md-sys-color-error

md-button-error-filled-label-text-colorg($t, 'error-filled-label-text-color')

System token--md-sys-color-on-error

md-button-error-elevated-container-colorg($t, 'error-elevated-container-color')

System token--md-sys-color-surface-container-low

md-button-error-elevated-label-text-colorg($t, 'error-elevated-label-text-color')

System token--md-sys-color-error

md-button-error-tonal-container-colorg($t, 'error-tonal-container-color')

System token--md-sys-color-error-container

md-button-error-tonal-label-text-colorg($t, 'error-tonal-label-text-color')

System token--md-sys-color-on-error-container

md-button-error-outlined-outline-colorg($t, 'error-outlined-outline-color')

Resolved valuecolor-mix(error 50%, transparent)

md-button-error-outlined-label-text-colorg($t, 'error-outlined-label-text-color')

System token--md-sys-color-error

md-button-error-text-label-text-colorg($t, 'error-text-label-text-color')

System token--md-sys-color-error

md-button-{scheme}-{variant}-container-hover-colorg($t, '{scheme}-{variant}-container-hover-color')

Resolved value8% state layer

md-button-{scheme}-{variant}-container-pressed-colorg($t, '{scheme}-{variant}-container-pressed-color')

Resolved value12% state layer

md-button-{scheme}-{variant}-container-disabled-colorg($t, '{scheme}-{variant}-container-disabled-color')

Resolved value12% on-surface

md-button-{scheme}-{variant}-label-text-disabled-colorg($t, '{scheme}-{variant}-label-text-disabled-color')

Resolved value38% on-surface

MButtonSegmented API

Props, slots, and events are hydrated from the generated public manifest.

MButtonSegmented

Button family

src/runtime/components/ui/button/segmented

Props

NameTypeDefault

colorSemantic Material color role used by the component scheme.

'primary' | 'secondary' | 'tertiary' | 'error''secondary'

disabledPrevents interaction and applies the disabled visual state.

booleanfalse

loadingReplaces content with progress feedback and prevents interaction.

booleanfalse

itemsSegments displayed by the single- or multi-select group.

MSegmentedItem[]() => []

modelValueCurrently selected segment value or values.

string | number | (string | number)[]undefined

multipleEnables selecting more than one segment.

booleanfalse

Slots

Events

@update:modelValueMSegmentedModelValue