Components
Segmented Controls
A compact segmented switch with an animated indicator.
UiSegmentedControls switches between a small number of options with an animated active indicator.
Add segmented controls
<script setup lang="ts">
import type { ISegmentedTab } from '@colorffy/ui'
import { ref } from 'vue'
const tabs: ISegmentedTab[] = [
{ id: 'all', label: 'All' },
{ id: 'active', label: 'Active' },
{ id: 'archived', label: 'Archived' },
]
const active = ref('all')
</script>
<template>
<UiSegmentedControls :tabs="tabs" v-model:active-tab="active" />
</template>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
tabs | ISegmentedTab[] | — | Items, the same shape as UiTabs: { id, label, disabled?, panelId?, icon?, badge? }. icon renders before the label, badge after it. |
activeTab | string | first tab | Active tab id. |
Emits: update:activeTab(tabId), so v-model:active-tab keeps the selection in sync.
The pill is positioned and animated with pure CSS anchor positioning, so it reads the active tab's real geometry — no offsets to keep in sync and no JavaScript. Where anchor positioning is unsupported, the active tab falls back to a bolder label on a filled background.
For standard underline-style tabs, use
UiTabs.CSS variables
Set these on :root, or on any wrapper to restyle only the controls inside it. The tab style (segmented-control-tab) keeps its own square corners, borderless frame and underline bar.
:root {
--cffy-segmented-control-indicator-bg-color: var(--cffy-primary-a10);
--cffy-segmented-control-item-active-color: var(--cffy-on-primary);
}
| Variable | Default | Controls |
|---|---|---|
--cffy-segmented-control-radius | --cffy-radius-full | Container and item corners |
--cffy-segmented-control-border-color | --cffy-outline-button | Container border |
--cffy-segmented-control-padding / --cffy-segmented-control-gap | --cffy-space-8 / --cffy-space-12 | Container padding and space between items |
--cffy-segmented-control-item-color / --cffy-segmented-control-item-font-size | --cffy-muted-a10 / --cffy-fs-2xs | Item text |
--cffy-segmented-control-item-hover-bg-color | primary tint | Hovered item |
--cffy-segmented-control-item-active-color | --cffy-on-background-inverse | Selected item text |
--cffy-segmented-control-indicator-bg-color | --cffy-surface-a90 | Sliding pill behind the selected item |
--cffy-segmented-control-easing / --cffy-segmented-control-duration | --cffy-ease-emphasized / --cffy-duration-600 | Pill slide and color transitions |