Components

DhPillTabs

Segmented pill tabs — one transparent track with a single filled thumb that slides and resizes to the selected segment. Same contract as DhTabs; variant is colour only. Keyboard nav (arrow keys, Home/End).

Open in Figma

Variant · primary

One transparent track; a single filled thumb floats to the selected segment, sliding and resizing as selection changes. The thumb fill is the variant colour.

Active: upcoming
<DhPillTabs
  bind:value={selected}
  tabs={[
    { id: 'upcoming', label: 'Upcoming' },
    { id: 'completed', label: 'Completed' },
    { id: 'overdue', label: 'Overdue' }
  ]}
  ariaLabel="Interview status"
/>

Variant · tertiary

Variant is colour only — the thumb and the selected label foreground pick up --color-tertiary.

<DhPillTabs
  bind:value={selected}
  tabs={[
    { id: 'upcoming', label: 'Upcoming' },
    { id: 'completed', label: 'Completed' },
    { id: 'overdue', label: 'Overdue' }
  ]}
  variant="tertiary"
  ariaLabel="Interview status"
/>

With icons

Segments may carry a leading icon alongside the label.

<DhPillTabs bind:value={selected} tabs={[
  { id: 'list', label: 'List', icon: 'workflow' },
  { id: 'grid', label: 'Grid', icon: 'image' }
]} ariaLabel="View mode" />

Scrollable

Intrinsic-width segments in a horizontally scrolling track (90px minimum).

<DhPillTabs
  bind:value={selected}
  tabs={[
    { id: 'summary', label: 'Summary' },
    { id: 'recordings', label: 'Recordings' },
    { id: 'transcripts', label: 'Transcripts' }
  ]}
  scrollable
  ariaLabel="Sections"
/>

Disabled segment

Disabled segments are skipped by arrow-key navigation.

<DhPillTabs bind:value={selected} tabs={[
  { id: 'upcoming', label: 'Upcoming' },
  { id: 'completed', label: 'Completed' },
  { id: 'overdue', label: 'Overdue (disabled)', disabled: true }
]} />