SegmentedBar

Segmented control / pill selector.

import { SegmentedBar } from '@ybouhjira/hyperkit';

#Playground

Edit the code — the preview recompiles and re-renders as you type.

Loading preview…

#More Examples

Tall

<SegmentedBar
  height={16}
  segments={[
      { value: 50, color: 'var(--sk-accent)', label: 'DNS' },
      { value: 30, color: 'var(--sk-success)', label: 'Connect' },
      { value: 20, color: 'var(--sk-warning)', label: 'TTFB' }
    ]}
/>

Animated

<SegmentedBar
  animated
  segments={[
      { value: 30, color: 'var(--sk-accent)', label: 'Scripting' },
      { value: 20, color: 'var(--sk-success)', label: 'Rendering' },
      { value: 10, color: 'var(--sk-warning)', label: 'Painting' },
      { value: 40, color: 'var(--sk-text-muted)', label: 'Idle' }
    ]}
/>

#Props

Prop	Type	Default	Description
`segments` *	`SegmentedBarSegment[]`	—	Array of segments to display.
`height`	`number`	`8`	Height of the bar in pixels.
`borderRadius`	`string`	`'var(--sk-radius-sm)'`	Border radius CSS value applied to the outer container and first/last segments.
`animated`	`boolean`	`false`	Animate segment widths when data changes.
`class`	`string`	—	Additional CSS classes.
`style`	`import('solid-js').JSX.CSSProperties`	—	Inline styles.

* required prop.

#Design Tokens

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.

--sk-duration-normal