BreezeUI
  • English

    • Segment

    A segmented control component for toggling between mutually exclusive options, with a smooth animated sliding indicator.

    Component Features

    • 🎨 Smooth Animation: Features a smooth animated sliding indicator.
    • 📏 Multiple Sizes: Supports sm, md (default), lg size specs.
    • ❌ Disabled State: Supports disabling the entire group or individual options.
    • 🖼️ Icon Support: Supports icons via BrIcon or inline content.
    • 🌗 Dark Mode: Based on BrConfigProvider for automatic dark mode adaptation.
    • 🎨 Theme Customization: Supports global theme configuration and TailwindCSS local overrides.

    Basic Usage

    <script setup>
import { BrSegment, BrSegmentItem } from '@breezeui/vue'
import { ref } from 'vue'

const value = ref('month')
</script>

<template>
  <BrSegment v-model="value">
    <BrSegmentItem value="day">Day</BrSegmentItem>
    <BrSegmentItem value="week">Week</BrSegmentItem>
    <BrSegmentItem value="month">Month</BrSegmentItem>
    <BrSegmentItem value="year">Year</BrSegmentItem>
  </BrSegment>
</template>

    Sizes

    Use the size prop on BrSegment to control the overall size. Available sizes: sm, md (default), lg.

    <script setup>
import { BrSegment, BrSegmentItem } from '@breezeui/vue'
import { ref } from 'vue'

const value = ref('md')
</script>

<template>
  <div class="flex flex-col gap-4">
    <BrSegment v-model="value" size="sm">
      <BrSegmentItem value="sm">Small</BrSegmentItem>
      <BrSegmentItem value="md">Medium</BrSegmentItem>
      <BrSegmentItem value="lg">Large</BrSegmentItem>
    </BrSegment>
    <BrSegment v-model="value" size="md">
      <BrSegmentItem value="sm">Small</BrSegmentItem>
      <BrSegmentItem value="md">Medium</BrSegmentItem>
      <BrSegmentItem value="lg">Large</BrSegmentItem>
    </BrSegment>
    <BrSegment v-model="value" size="lg">
      <BrSegmentItem value="sm">Small</BrSegmentItem>
      <BrSegmentItem value="md">Medium</BrSegmentItem>
      <BrSegmentItem value="lg">Large</BrSegmentItem>
    </BrSegment>
  </div>
</template>

    Disabled

    Use the disabled prop on BrSegment to disable the entire group, or on individual BrSegmentItem to disable a single option.

    <script setup>
import { BrSegment, BrSegmentItem } from '@breezeui/vue'
import { ref } from 'vue'

const value = ref('list')
</script>

<template>
  <div class="flex flex-col gap-4">
    <BrSegment v-model="value" disabled>
      <BrSegmentItem value="list">List</BrSegmentItem>
      <BrSegmentItem value="grid">Grid</BrSegmentItem>
      <BrSegmentItem value="table">Table</BrSegmentItem>
    </BrSegment>

    <BrSegment v-model="value">
      <BrSegmentItem value="list">List</BrSegmentItem>
      <BrSegmentItem value="grid" disabled>Grid</BrSegmentItem>
      <BrSegmentItem value="table">Table</BrSegmentItem>
    </BrSegment>
  </div>
</template>

    Icons

    BrSegmentItem supports icons via BrIcon or inline content.

    <script setup>
import { BrSegment, BrSegmentItem, BrIcon } from '@breezeui/vue'
import { ref } from 'vue'

const value = ref('grid')
</script>

<template>
  <div class="flex flex-col gap-4">
    <BrSegment v-model="value">
      <BrSegmentItem value="list">
        <BrIcon icon="lucide:list" size="sm" />
      </BrSegmentItem>
      <BrSegmentItem value="grid">
        <BrIcon icon="lucide:grid-3x3" size="sm" />
      </BrSegmentItem>
      <BrSegmentItem value="table">
        <BrIcon icon="lucide:table" size="sm" />
      </BrSegmentItem>
    </BrSegment>

    <BrSegment v-model="value">
      <BrSegmentItem value="list">
        <BrIcon icon="lucide:list" size="sm" class="mr-1.5" />
        List
      </BrSegmentItem>
      <BrSegmentItem value="grid">
        <BrIcon icon="lucide:grid-3x3" size="sm" class="mr-1.5" />
        Grid
      </BrSegmentItem>
      <BrSegmentItem value="table">
        <BrIcon icon="lucide:table" size="sm" class="mr-1.5" />
        Table
      </BrSegmentItem>
    </BrSegment>
  </div>
</template>

    API

    BrSegment Props

    NameTypeDefaultDescription
    modelValuestring | numberundefinedCurrent selected value (supports v-model)
    size'sm' | 'md' | 'lg''md'Size of the segment control
    disabledbooleanfalseWhether the entire group is disabled
    classanyundefinedCustom CSS class

    BrSegmentItem Props

    NameTypeDefaultDescription
    valuestring | number— (required)Unique value of this option
    disabledbooleanfalseWhether this item is disabled
    classanyundefinedCustom CSS class

    BrSegment Emits

    NameDescriptionParameters
    update:modelValueEmitted when the selected value changes(value: string | number)

    Accessibility

    • BrSegment has role="radiogroup" with aria-disabled support
    • Each BrSegmentItem has role="radio" with aria-checked reflecting the active state
    • Keyboard navigation: ArrowLeft/ArrowRight to move between items, Home/End for first/last
    • Focus management: only the active item is in the tab order