DhTabs

Stateless tab list with keyboard nav (arrow keys, Home/End). Variant (primary/secondary/tertiary/error) × tabType (tabs/pills) × align (start/center/end/stretch) × label/icon/label-icon × fixed/scrollable.

Open in Figma

Variant · primary

Default colour role — selected text and the 3px rounded-pill indicator pick up --color-primary.

Active: video

<DhTabs
  bind:value={value}
  tabs={items}
  ariaLabel="Media type"
/>

Variant · secondary

<DhTabs
  bind:value={value}
  tabs={items}
  variant="secondary"
  ariaLabel="Media type"
/>

Variant · tertiary

<DhTabs
  bind:value={value}
  tabs={items}
  variant="tertiary"
  ariaLabel="Media type"
/>

Variant · error

<DhTabs
  bind:value={value}
  tabs={items}
  variant="error"
  ariaLabel="Media type"
/>

Configuration · icon only

<DhTabs
  bind:value={value}
  tabs={items}
  configuration="icon"
  ariaLabel="Quick actions"
/>

Configuration · label & icon

<DhTabs
  bind:value={value}
  tabs={items}
  configuration="label-icon"
  ariaLabel="Media type"
/>

Tab type · pills (primary)

Segmented chip group — selected chip is variant-filled, unselected chips show a --color-surface-bright border. The chip itself communicates selection, so no underline is drawn.

Active: upcoming

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

Tab type · pills (tertiary)

Variant axis applies to pills too — the filled chip picks up --color-tertiary.

<DhTabs
  bind:value={value}
  tabs={items}
  tabType="pills"
  variant="tertiary"
  ariaLabel="Interview status"
/>

Tab type · pills with disabled chip

Disabled pill chips skip keyboard focus cycling, same as the other variants.

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

Align · start

Tabs hug their content width and sit against the leading edge. Default for tabType=pills.

<DhTabs
  bind:value={value}
  tabs={items}
  align="start"
  ariaLabel="Media type"
/>

Align · center

<DhTabs
  bind:value={value}
  tabs={items}
  align="center"
  ariaLabel="Media type"
/>

Align · end

<DhTabs
  bind:value={value}
  tabs={items}
  align="end"
  ariaLabel="Media type"
/>

Align · stretch (default for tabs)

Each tab grows to fill the row equally — the legacy fixed-layout behaviour.

<DhTabs
  bind:value={value}
  tabs={items}
  align="stretch"
  ariaLabel="Media type"
/>

Scrollable

<DhTabs
  bind:value={scroll}
  tabs={manyTabs}
  scrollable
  ariaLabel="Workspace sections"
/>

Disabled tab

Disabled tabs skip arrow-key focus cycling.

<DhTabs bind:value={dis} tabs={[
  { id: 'one', label: 'One' },
  { id: 'two', label: 'Two' },
  { id: 'three', label: 'Three (disabled)', disabled: true },
  { id: 'four', label: 'Four' }
]} />