Segmented Control

Compact inline toggle for switching between a small set of mutually exclusive options. Used in table toolbars, filter bars, and view switchers.

Variant
Size
Segments
<AppSegmentedControl
  v-model="selected"
  :options="["All","Active","Pending"]"
/>
Recommended usage
2–4 segments works best for readability and touch targets. While up to 10 are supported, more than 5 will feel cramped at smaller sizes. For longer option sets, consider a select or filter dropdown instead.

Variants

default — neutral active pill, light background
Selected: All
primary — royalblue active pill, light background
Selected: All
secondary — darkblue active pill, light background
Selected: All
ghost — solid white active pill, for coloured backgrounds
Selected: All

Props

PropTypeDefaultDescription
modelValue / v-modelstring—The currently selected value. Should match the value field of one of the options.
optionsstring[] | { label: string; value: string }[]—Required. Segment options. Pass a plain string array as a shorthand — each string is used as both label and value.
variant'default' | 'primary' | 'secondary' | 'ghost''default'Visual style. Use ghost on coloured backgrounds (e.g. the royalblue header).
size'xs' | 'sm' | 'md' | 'lg''sm'Controls text size and padding of each segment.

Options format

Pass a plain string array as a shorthand when label and value are the same. Use the object form when you need different display text and underlying values.

String shorthand

<AppSegmentedControl v-model="view" :options="['All', 'Active', 'Pending']" />

Object form

<AppSegmentedControl
  v-model="status"
  :options="[
    { label: 'All clients',    value: 'all'      },
    { label: 'Active only',    value: 'active'   },
    { label: 'Pending review', value: 'pending'  },
  ]"
/>

Sizes

xs
sm
md
lg