Buttons

Segmented button

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

Anatomy

Callouts are measured from the live group below, so the lines point at the real segments.

1
Container
The connected outline that groups the segments and clips their shared corners.
2
Segment
One option — a button with an optional icon and label, separated from its neighbour by a divider.
3
Selected segment
The active option, filled with the selected scheme for the chosen color role.
4
Check icon
Appears on selection with a scale transition; replaces the item icon while selected.

Selection modes

The same component as a single-choice control and as a set of independent toggles.

Single select — exactly one active segment, marked with a check. Model: week

Single select

One active segment at a time; the model is a single value.

Vue

<m-button-segmented
  v-model="range"
  :items="[
    { label: 'Day', value: 'day' },
    { label: 'Week', value: 'week' },
    { label: 'Month', value: 'month' },
  ]"
  color="secondary"
/>

Multiple select — toggle several segments on and off. Model: bold

Multiple with icons

multiple turns each segment into an independent toggle; the model is an array.

Vue

<m-button-segmented
  v-model="formats"
  multiple
  :items="[
    { label: 'Bold', value: 'bold', icon: 'ic:round-format-bold' },
    { label: 'Italic', value: 'italic', icon: 'ic:round-format-italic' },
    { label: 'Underline', value: 'underline', icon: 'ic:round-format-underlined' },
  ]"
  color="primary"
/>

Interactive configuration

Switch the selected color role, toggle multiple, and disable the whole group.

Color communicates role
Keep the selected scheme tied to the meaning of the choice, not decoration.
Multiple is a different contract
Only switch to multiple when several segments can be active at once.

Properties

Color

Selected-segment role

Multiple

Disabled

States

Each segment resolves the full M3 state scheme; the group can be disabled as a whole or per item.

Default

Unselected

A neutral segment awaiting selection.

Active

Selected

Filled with the selected scheme and marked with a check.

Pointer

Hover / pressed

A state layer confirms the segment is interactive.

Unavailable

Disabled segment

`item.disabled` blocks one option while the rest stay usable.

Unavailable

Disabled group

`disabled` on the group removes interaction from every segment.

Container

Segment

Selected segment

Check icon