PxTabs

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 { PxTabs } 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>
  <PxTabs v-model="activeTab" :tabs="tabs" />
  <div>Active: {{ activeTab }}</div>
</template>

With Protected (Disabled) Tabs

Protected Tabs

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

API Reference

Prop	Type	Default	Description
tabsrequired	TabItemConfig[]	—	—
modelValuerequired	string	—	—
protectedTabs	string[]	() => []	—

Tab Object Shape

interface TabItemConfig {
  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)
}