Segmented Button Group

Installation

pnpm dlx shadcn@latest add @cleverui/button-group-segmented

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { ButtonGroupSegmented } from '@/components/ui/button-group-segmented'

Exampletsx

'use client'

import { useState } from 'react'
import { ButtonGroupSegmented } from '@/components/ui/button-group-segmented'

export default function ButtonGroupSegmentedDemo() {
  const [density, setDensity] = useState('comfortable')
  const [range, setRange] = useState('30d')

  return (
    <div className="mx-auto flex min-h-[360px] max-w-xl flex-col items-center justify-center gap-12 px-6 py-16">
      <div className="flex w-full flex-col items-center gap-3">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
          Ledger density
        </p>
        <ButtonGroupSegmented
          label="Ledger density"
          value={density}
          onValueChange={setDensity}
          options={[
            { value: 'compact', label: 'Compact' },
            { value: 'comfortable', label: 'Comfortable' },
            { value: 'spacious', label: 'Spacious' },
          ]}
        />
        <p className="text-sm text-muted-foreground">
          Showing{' '}
          <span className="font-medium text-foreground">
            {density === 'compact' ? '32' : density === 'comfortable' ? '18' : '10'}
          </span>{' '}
          rows per page
        </p>
      </div>

      <div className="flex w-full flex-col items-center gap-3">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
          Reporting window
        </p>
        <ButtonGroupSegmented
          label="Reporting window"
          size="sm"
          value={range}
          onValueChange={setRange}
          options={[
            { value: '7d', label: '7d' },
            { value: '30d', label: '30d' },
            { value: '90d', label: '90d' },
            { value: 'ytd', label: 'YTD' },
            { value: 'custom', label: 'Custom', disabled: true },
          ]}
        />
        <p className="text-sm text-muted-foreground">
          {range === '7d' && 'Week of Jun 30 – Jul 6 · 1,248 events'}
          {range === '30d' && 'Jun 7 – Jul 6 · 5,914 events'}
          {range === '90d' && 'Apr 8 – Jul 6 · 17,302 events'}
          {range === 'ytd' && 'Jan 1 – Jul 6 · 41,088 events'}
        </p>
      </div>

      <div className="flex w-full flex-col items-center gap-3">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
          Editor mode
        </p>
        <ButtonGroupSegmented
          label="Editor mode"
          size="lg"
          defaultValue="design"
          options={[
            { value: 'design', label: 'Design' },
            { value: 'prototype', label: 'Prototype' },
            { value: 'handoff', label: 'Handoff' },
          ]}
        />
      </div>
    </div>
  )
}

API reference

ButtonGroupSegmented accepts the following props.

Prop	Type	Default	Description
`options`*	`ButtonGroupSegmentedOption[]`	–	2–5 segments; disabled segments render at opacity 50 and are skipped by arrow navigation
`value`	`string`	–	controlled selected value; pair with onValueChange
`defaultValue`	`string`	–	uncontrolled initial selection; falls back to the first enabled option
`onValueChange`	`(value: string) => void`	–	fires when a segment is selected by click or Enter/Space
`size`	`VariantProps<typeof segmentButtonVariants>['size']`	`'md'`	cva sizes, h-8 text-xs / h-9 text-sm / h-11 text-sm segment heights
`label`	`string`	`'View options'`	accessible name for the group

…plus everything from Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface ButtonGroupSegmentedOption {
  value: string
  label: string
  disabled?: boolean
}

Related components

Magnetic Button

Magnetic button done with restraint, at most 8px of pull inside an 80px radius, spring return on leave, and the effect disabled on touch and reduced motion so the hit target stays honest.

Shine Button

Button whose filled variants carry a single sheen sweep on hover, light passing over a surface. Four variants, three sizes, press feedback, full keyboard focus treatment.

Confirm Hold Button

Press-and-hold confirmation for destructive actions, a radial destructive fill charges while held and fires only past the threshold; releasing early cancels. Holding Space counts exactly the same.

Hotkey Button

A React button that binds a real keyboard shortcut, mac-aware kbd chip, aria-keyshortcuts, a typing-context guard, and a remote-press flash when the hotkey fires it.

Progress Button

A button that becomes its own progress state, idle, a hairline sweep tracing the border while working, a drawn check on success. Controlled state prop with honest aria-busy announcements.

Split Button

A self-contained split button for React, filled primary action, hairline-divided menu toggle, and real role=menu keyboard semantics with zero Radix or portal dependencies.

Frequently asked questions

How do I install the Segmented Button Group component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/button-group-segmented`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Segmented Button Group require?

Segmented Button Group uses motion and class-variance-authority on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Segmented Button Group to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code