Segmented

Shared class-name token primitives for the segmented-control visual language. Consumed by SegmentedControl, Tabs, and TabNavigation so they render an identical shell, padding, gap, and active indicator at any size. Not components — these are Tailwind class strings and size→class maps.

Usage

import { SEGMENTED_GAP, SEGMENTED_INDICATOR_ACTIVE_CLASS, SEGMENTED_INDICATOR_CLASS, SEGMENTED_SHELL_BASE, SEGMENTED_SHELL_PADDING, SEGMENTED_TRIGGER_PADDING } from "@desk/ui/components/segmented";

Best practices

These are class-name strings and size→class maps, not components — apply them via className, never render them as JSX.
Reuse these tokens to give a custom control the segmented "pill" shell; for actual segmented UIs prefer SegmentedControl; Tabs and TabNavigation consume the same tokens for panel and navigation switching.

Props

Also exports

constSEGMENTED_GAP
constSEGMENTED_INDICATOR_ACTIVE_CLASS
constSEGMENTED_INDICATOR_CLASS
constSEGMENTED_SHELL_BASE
constSEGMENTED_SHELL_PADDING
constSEGMENTED_TRIGGER_PADDING

Composition

Used by

SegmentedControl, Tabs