Slider pill tabs

Pill-shaped tab control with animated background slider. The messages variant is full width and matches the product Creation process chrome (bordered pill, no extra bar background). The product variant is inline width.

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	'messages' \| 'product'	Layout and padding preset
size	'default' \| 'sm'	Keeps the default size unless a smaller control is needed