Vuance UI Kit

Buttons

Segmented button

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

One connected choice

Reach for MButtonSegmented when a person compares a few related options at once — view density, a date range, text formatting. It is a selection control, not navigation.

  • Single or multipleDefault single-select keeps one active segment; `multiple` turns each segment into an independent toggle.
  • Labels, icons, or bothEach item carries a `label`, an `icon`, or both; the selected segment reveals a check with a scale transition.
  • Selected scheme by role`color` (primary | secondary | tertiary | error) drives the selected-segment container and content; default is secondary.
  • Per-segment and group disabledDisable a single `item.disabled` or the whole group with `disabled`.
  • v-model both shapes`v-model` is a single value in single mode and an array in `multiple` mode.
  • 2–5 optionsKeep the group short and on one line; longer sets belong in a select, a list, or tabs.

A quick look

The default single-select group: click a segment to make it the one active choice.

01

Bind one source of truth

`v-model` holds the selected value; render the result next to the control, not inside it.

02

Pass items as data

Segments come from the `items` prop; the component only emits the selection, it owns no menu or dialog.