Components
Tabs
Switch between views with the keyboard-accessible UiTabs component.
UiTabs renders a keyboard-accessible tab list (arrow keys, Home/End). Pass an array of tab items and react to selection with updateActiveTab.
Add tabs
<script setup lang="ts">
import type { ITabItem } from '@colorffy/ui'
import { ref } from 'vue'
const tabs: ITabItem[] = [
{ id: 'overview', label: 'Overview' },
{ id: 'pricing', label: 'Pricing' },
{ id: 'faq', label: 'FAQ', disabled: true },
]
const active = ref('overview')
</script>
<template>
<UiTabs :tabs="tabs" :active-tab="active" @update-active-tab="active = $event" />
<section v-show="active === 'overview'">Overview panel</section>
<section v-show="active === 'pricing'">Pricing panel</section>
</template>
Add a badge to a tab
Each tab item accepts an optional badge (a Partial<IBadgeProps>) rendered after the label — handy for counts or status hints.
<script setup lang="ts">
const tabs: ITabItem[] = [
{ id: 'inbox', label: 'Inbox', badge: { text: '12', variant: 'primary', pill: true } },
{ id: 'archived', label: 'Archived', badge: { text: 'New', variant: 'success' } },
{ id: 'spam', label: 'Spam' },
]
</script>
Style as pills or contrast
<template>
<UiTabs :tabs="tabs" pill-tabs />
<UiTabs :tabs="tabs" contrast-tabs />
</template>
Add a leading icon to a tab
Each tab item accepts an optional icon (a Material Symbols entity code, same convention as INavItem.icon) rendered before the label.
<script setup lang="ts">
const tabs: ITabItem[] = [
{ id: 'overview', label: 'Overview', icon: '' },
{ id: 'details', label: 'Details', icon: '' },
]
</script>
Fluid (equal-width) tabs
Set fluid to stretch every tab to fill the available width equally.
<template>
<UiTabs :tabs="tabs" fluid />
</template>
Overflow scrolling
When the tab list is wider than its container, it scrolls horizontally with a thin scrollbar instead of wrapping or clipping. No extra prop is needed — this is the default behavior of UiTabs.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
tabs | ITabItem[] | — | Tab items: { id, label, disabled?, panelId?, badge?, icon? }. |
activeTab | string | first tab | Id of the active tab. |
pillTabs | boolean | false | Pill styling. |
contrastTabs | boolean | false | Contrast styling. |
fluid | boolean | false | Equal-width tabs that stretch to fill the available space. |
Emits: updateActiveTab(tabId: string).
For a compact segmented switch, use
UiSegmentedControls with ISegmentedTab items ({ id, label, position }).