Slider pill tabs

Pill-shaped tab control with animated background slider. capsule nests inside V2StickyCapsule (messages filters, profile tabs, explore segments). messages is a full-width bordered shell; product is inline (creation process).

Variant: capsule (inside sticky capsule)

Variant: messages (full width, same shell as product)

Variant: product (inline)

Size: sm

Usage

<SliderPillTabs
  variant="messages"
  :tabs="tabs"
  :active-id="activeId"
  @change="activeId = $event"
/>
<template #label="{ tab }">…</template>

Props

Prop	Type	Description
tabs	Array	Items with at least `id` and `label`
activeId	String	Id of the selected tab
variant	'capsule' \| 'messages' \| 'product'	capsule = nested in V2StickyCapsule; messages = full-width shell; product = inline
size	'default' \| 'sm'	Keeps the default size unless a smaller control is needed