SegmentedControl

The capsule is a shared layout animation, so it glides between options instead of jumping. Use the glass variant on a page and on-glass inside a sheet or popover.

import { useState } from 'react';
import { SegmentedControl, SegmentedControlItem } from '@andrewbehma/glass-ui';

Playground

SegmentedControl.tsx

import { useState } from 'react';
import { SegmentedControl, SegmentedControlItem } from '@andrewbehma/glass-ui';

function Example() {
  const [view, setView] = useState("Week");
  return (
    <SegmentedControl role="group" aria-label="Range">
      {['Day', 'Week', 'Month'].map((option) => (
        <SegmentedControlItem key={option} active={view === option} layoutId="range">
          <button
            type="button"
            aria-pressed={view === option}
            onClick={() => setView(option)}
            className="relative w-full px-4 py-1.5 text-body"
          >
            {option}
          </button>
        </SegmentedControlItem>
      ))}
    </SegmentedControl>
  );
}

States

Each tile is the live component. Open one in the playground to keep tweaking it.

Glass
On glass