Tabs

Stable v1.0.2

Tabs for switching between views, with icons, badges, and swipe support on mobile so it doesn't feel bolted onto touch devices.

Interactive Playground

Combine every prop live — variant, size, and fitted layout — and click a tab to see v-model update in real-time.

Appearance

Variant

Underline

Size

Medium (md)

Layout

Fitted (Fill Width)

State (v-model)

Active Tab: overview

Live Source Code

<Tabs
  v-model="activeTab"
  :tabs="tabs"
/>

Standard Underline

The default variant. Ideal for primary page navigation or structural content splitting.

Basic Text

Icons & Disabled State

Dynamic Badges

Sizes

Script Setup & Template

<script setup>
const activeTab = ref('messages')

const tabs = [
  { id: 'general', label: 'General' },
  { id: 'messages', label: 'Messages', badge: '12', badgeSeverity: 'primary' },
  { id: 'alerts', label: 'Alerts', icon: 'lucide:bell' }
]
</script>

<template>
  <Tabs :tabs="tabs" v-model="activeTab" />

  <!-- size accepts xs | sm | md | lg | xl, default "md" -->
  <Tabs :tabs="tabs" v-model="activeTab" size="xl" />
</template>

Pill Variant (Segmented Control)

Pass variant="pill" to create an enclosed, contained toggle. Perfect for filtering lists or graphs.

Auto Width

Fitted Layout (Stretches 100%)

Template

<!-- Auto-width Pill -->
<Tabs :tabs="pillTabs" v-model="activeTab" variant="pill" />

<!-- Fitted Pill (Forces tabs to stretch equally to fill parent width) -->
<Tabs :tabs="pillTabs" v-model="activeTab" variant="pill" fitted />

Enclosed Variant

Pass variant="enclosed" for a card-style layout. The active tab physically connects to the content area below it.

Managing profile

This simulated content area perfectly connects to the active folder tab above it, creating a seamless panel.

Template

<Tabs :tabs="tabs" v-model="activeTab" variant="enclosed" />

text Variant

Pass variant="text" for a minimal, frameless design. Excellent for subtle filtering within dashboard widgets.

Analytics Overview

Showing data for: daily

Template

<Tabs :tabs="tabs" v-model="activeTab" variant="text" fitted />

API Reference

Props

Name	Type / Signature	Default	Description
modelValue	string \| number	required	The active tab id, bound via v-model.
tabs	TabItem[]	required	Array of tab definitions: { id, label, icon?, badge?, badgeSeverity?, disabled? }.
variant	"underline" \| "pill" \| "enclosed" \| "text"	"underline"	Visual style of the tab bar.
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	"md"	Controls the padding, text, icon, and badge scale.
fitted	boolean	false	Stretches tabs to equally fill the available width.

TabItem Shape

Name	Type / Signature	Default	Description
id	string \| number	required	Unique identifier matched against the v-model.
label	string	required	Visible tab text.
icon	string	undefined	Lucide icon rendered before the label.
badge	string \| number	undefined	Small counter rendered after the label.
badgeSeverity	"primary" \| "secondary" \| "danger" \| "success" \| "warning" \| "info"	"primary"	Semantic color of the badge when the tab is active.
disabled	boolean	false	Prevents the tab from being selected.