TabComponent

A horizontal tab bar with icon support, active state highlighting, and optional close/remove tab functionality. Renders only tabs with show !== false.

Basic Usage

Demo

Active tab: profile

<script setup>
import { ref } from 'vue'
import { TabComponent } from 'praxis-vue-ui'

const activeTab = ref('profile')

const tabs = [
  { key: 'profile', label: 'Profile', icon: 'User', show: true },
  { key: 'contact', label: 'Contact', icon: 'MapPinned', show: true },
  { key: 'billing', label: 'Billing', icon: 'Receipt', show: true },
]
</script>

<template>
  <TabComponent v-model="activeTab" :tabs="tabs" />
  <div>Active: {{ activeTab }}</div>
</template>

With Protected (Disabled) Tabs

Protected Tabs

<TabComponent
  v-model="activeTab"
  :tabs="tabsWithDisabled"
  :protected-tabs="['contact']"
/>

Props

Props

Prop	Type	Default	Description
tabsrequired	GeneralTabsProfile[]	—	Array of tab definitions. Each item must have key, label, icon, and show.
modelValuerequired	string	—	The key of the currently active tab. Use with v-model.
protectedTabs	string[]	[]	Array of tab keys that are disabled when their enabled property is false.

Tab Object Shape

interface GeneralTabsProfile {
  key: string            // Unique identifier, used as modelValue
  label: string          // Display text
  icon: string           // Lucide icon name (e.g. 'User', 'Calendar')
  show?: boolean         // Hide tab entirely when false (default: true)
  enabled?: boolean      // Used with protectedTabs to disable a tab
  tooltip?: string       // Optional tooltip on hover
  removeTab?: boolean    // Show ✕ button to close the tab
  command?: () => void   // Custom function to run on click (skips tab switching)
}

Emits

Emits

Event	Payload	Description
update:modelValue	string	Emitted when the user clicks a tab. Value is the clicked tab's key.
remove-tab	string | number	Emitted when the user clicks the ✕ remove button on a tab (requires removeTab: true on the tab).

Slots

Slots

Slot	Description
actions	Content placed in the right side of the tab bar. Useful for action buttons.
getback	Additional right-side slot for back/return navigation.