Segmented Buttons

There are two types of segmented buttons: single-select and multi-select.

Single select

Single-select segmented buttons are used to select a single option, switch between views or sort elements.

Currently selected: day

<script setup lang="ts">
import { ref } from 'vue'

const selected = ref('day')
</script>

<template>
  <BSegmentGroup v-model="selected">
    <BSegmentButton value="day">
      Day
    </BSegmentButton>
    <BSegmentButton value="week">
      Week
    </BSegmentButton>
    <BSegmentButton value="month">
      Month
    </BSegmentButton>
  </BSegmentGroup>
  <div class="mt-6">
    Currently selected: {{ selected ? selected : 'none' }}
  </div>
</template>

Multi select

Multi-select segmented buttons are used to select multiple options from a group of options or filter elements. Automatically enabled if you provide an Array to v-model

Currently selected: [ "cheep", "expensive" ]

<script setup lang="ts">
import { ref } from 'vue'

const selected = ref(['cheep', 'expensive'])
</script>

<template>
  <BSegmentGroup v-model="selected">
    <BSegmentButton value="cheep">
      $
    </BSegmentButton>
    <BSegmentButton value="normal">
      $$
    </BSegmentButton>
    <BSegmentButton value="expensive">
      $$$
    </BSegmentButton>
  </BSegmentGroup>
  <div class="mt-6">
    Currently selected: {{ selected?.length ? selected : 'none' }}
  </div>
</template>