Buttons

Split button

Keep the common outcome immediate while exposing nearby alternatives.

Playground

Configure the component and copy synchronized Vue code.

Properties

Variant

Primary action

Disabled

Vue

<m-button-split
  :items="saveActions"
  variant="filled"
>
  Save
</m-button-split>

Token map

The manual manifest combines inherited token owners with local deltas.

Search tokens

MButtonSplit · All53 tokens

md-split-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-split-button-dropdown-padding-inlineg($t, 'dropdown-padding-inline')

Resolved value4rem

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-split-button-separator-opacityg($t, 'separator-opacity')

Resolved value30% surface

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

MButtonSplit API

Props, slots, and events are generated from the current public kit contract.

MButtonSplit

Button family

src/runtime/components/ui/button/split

Props

NameTypeDefault

colorSemantic Material color role used by the component scheme.

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

variantMaterial surface treatment that controls the component emphasis.

'elevated' | 'filled' | 'tonal' | 'outlined' | 'text''filled'

disabledPrevents interaction and applies the disabled visual state.

booleanfalse

loadingReplaces content with progress feedback and prevents interaction.

booleanfalse

itemsSecondary actions shown in the attached menu.

UiSplitMenuItem[]() => []

Slots

Events

@clickvoid

@dropdownvoid

@selectUiSplitMenuItem