SegmentedControl

The example below loads live from Storybook; open it in Storybook to use the controls. Change the option to see the pill slide on a spring.

Live example, StorybookOpen in Storybook

Default

SegmentedControl comes at 36 px high. The selected option sits on a raised pill that slides over a layer track. label is required.

DailyWeeklyMonthly

LightDark

Copy code

import { Provider, SegmentedControl } from '@bigbang/ui';

const items = [
  { value: 'day', label: 'Daily' },
  { value: 'week', label: 'Weekly' },
  { value: 'month', label: 'Monthly' },
];

export default function Default() {
  return (
    <Provider locale="en-GB">
      <SegmentedControl label="Period" items={items} defaultValue="week" />
    </Provider>
  );
}

With icons

Each option can take a decorative icon before its label.

ListGrid

LightDark

Copy code

import { Provider, SegmentedControl } from '@bigbang/ui';

export default function WithIcons() {
  return (
    <Provider locale="en-GB">
      <SegmentedControl
        label="View"
        defaultValue="list"
        items={[
          { value: 'list', label: 'List', icon: 'list' },
          { value: 'grid', label: 'Grid', icon: 'layout-grid' },
        ]}
      />
    </Provider>
  );
}

Sizes

size gives a 32 or 36 px height.

DailyWeeklyMonthly

DailyWeeklyMonthly

LightDark

Copy code

import { Provider, SegmentedControl } from '@bigbang/ui';

const items = [
  { value: 'day', label: 'Daily' },
  { value: 'week', label: 'Weekly' },
  { value: 'month', label: 'Monthly' },
];

export default function Sizes() {
  return (
    <Provider locale="en-GB">
      <div className="flex flex-col items-start gap-lg">
        <SegmentedControl label="Period sm" items={items} defaultValue="day" size="sm" />
        <SegmentedControl label="Period md" items={items} defaultValue="day" />
      </div>
    </Provider>
  );
}

Full width

fullWidth stretches the control to its container and shares the width equally.

DailyWeeklyMonthly

LightDark

Copy code

import { Provider, SegmentedControl } from '@bigbang/ui';

const items = [
  { value: 'day', label: 'Daily' },
  { value: 'week', label: 'Weekly' },
  { value: 'month', label: 'Monthly' },
];

export default function FullWidth() {
  return (
    <Provider locale="en-GB">
      <div className="w-full max-w-md">
        <SegmentedControl label="Period" items={items} defaultValue="month" fullWidth />
      </div>
    </Provider>
  );
}

Disabled

A single option can be disabled; arrow keys skip it. Pass disabled to the control to turn off every option.

DailyWeeklyMonthlyYearly

LightDark

Copy code

import { Provider, SegmentedControl } from '@bigbang/ui';

const items = [
  { value: 'day', label: 'Daily' },
  { value: 'week', label: 'Weekly' },
  { value: 'month', label: 'Monthly' },
];

export default function Disabled() {
  return (
    <Provider locale="en-GB">
      <SegmentedControl
        label="Period"
        items={[...items, { value: 'year', label: 'Yearly', disabled: true }]}
        defaultValue="day"
      />
    </Provider>
  );
}

Light and dark mode

Colours come from semantic tokens; neither mode needs extra settings.

Light

DailyWeeklyMonthly

Dark

DailyWeeklyMonthly

Copy code

import { Provider, SegmentedControl } from '@bigbang/ui';

const items = [
  { value: 'day', label: 'Daily' },
  { value: 'week', label: 'Weekly' },
  { value: 'month', label: 'Monthly' },
];

export default function Default() {
  return (
    <Provider locale="en-GB">
      <SegmentedControl label="Period" items={items} defaultValue="week" />
    </Provider>
  );
}