components / segmented

segmented.

controlled segmented control — a row of mutually exclusive options, active one bordered. compact uppercase variant for mode toggles.

installation

bunx @justin06lee/chrome@latest add segmented

usage

View switch

const [v, setV] = useState("day");

<Segmented
  value={v}
  onChange={setV}
  options={[
    { value: "day", label: "day" },
    { value: "month", label: "month" },
  ]}
/>

Compact (mode toggle)

<Segmented size="compact" value={mode} onChange={setMode}
  options={[{ value: "now", label: "Now" }, { value: "backfill", label: "Backfill" }]} />