PillTabs

Pill-shaped tabs with optional icons, horizontal or vertical. Use size (xs, sm, md, lg, xl) to change density.

Import

Vue

import { UiPillTabs } from '@ziyarago/ui/vue'

Horizontal

Vue

<UiPillTabs
  value="flights"
  :items="[{ value: 'flights', label: 'Flights', icon: 'plane' }, { value: 'hotels', label: 'Hotels', icon: 'bed' }, { value: 'transfers', label: 'Transfers', icon: 'car' }]"
 />

Vertical

Vue

<UiPillTabs
  vertical
  value="hotels"
  :items="[{ value: 'flights', label: 'Flights', icon: 'plane' }, { value: 'hotels', label: 'Hotels', icon: 'bed' }, { value: 'transfers', label: 'Transfers', icon: 'car' }]"
 />

Sizes

Vue

<UiPillTabs
  value="flights"
  :items="[{ value: 'flights', label: 'Flights', icon: 'plane' }, { value: 'hotels', label: 'Hotels', icon: 'bed' }, { value: 'transfers', label: 'Transfers', icon: 'car' }]"
  size="xs"
 />

<UiPillTabs
  value="flights"
  :items="[{ value: 'flights', label: 'Flights', icon: 'plane' }, { value: 'hotels', label: 'Hotels', icon: 'bed' }, { value: 'transfers', label: 'Transfers', icon: 'car' }]"
  size="sm"
 />

<UiPillTabs
  value="flights"
  :items="[{ value: 'flights', label: 'Flights', icon: 'plane' }, { value: 'hotels', label: 'Hotels', icon: 'bed' }, { value: 'transfers', label: 'Transfers', icon: 'car' }]"
  size="md"
 />

<UiPillTabs
  value="flights"
  :items="[{ value: 'flights', label: 'Flights', icon: 'plane' }, { value: 'hotels', label: 'Hotels', icon: 'bed' }, { value: 'transfers', label: 'Transfers', icon: 'car' }]"
  size="lg"
 />

<UiPillTabs
  value="flights"
  :items="[{ value: 'flights', label: 'Flights', icon: 'plane' }, { value: 'hotels', label: 'Hotels', icon: 'bed' }, { value: 'transfers', label: 'Transfers', icon: 'car' }]"
  size="xl"
 />

API reference

Pill-style tab buttons with optional icons, horizontal or vertical; use for settings and profile sections.

Props

PropType and valuesDefaultDescription

items{ value: string; label: string; icon?: string }[]'[]'Tabs.

valuestring—Value of the selected tab. Changed via the change event.

verticalbooleanfalseStacks the tabs in a column.

sizexssmmdlgxl'md'Scale of button height, gap and text.

Events

Vue: @name. React: onName.

changeCalled with the value of the clicked tab.

Notes

Renders only the tab buttons; you show the matching panel yourself.