function Demo() {
  const [v, setV] = useState('week');
  return (
    <ButtonGroup value={v} onChange={setV}
      items={[{ value: 'day', label: 'Day' }, { value: 'week', label: 'Week' }, { value: 'month', label: 'Month' }]}
    />
  );
}

<ButtonGroup size="sm" value="a" onChange={setV} items={[...]} />
<ButtonGroup size="md" value="a" onChange={setV} items={[...]} />

<ButtonGroup variant="primary" value="week" onChange={setV} items={[...]} />
<ButtonGroup variant="secondary" value="week" onChange={setV} items={[...]} />
<ButtonGroup variant="ghost" value="week" onChange={setV} items={[...]} />

<ButtonGroup value="week" onChange={setV}
  items={[
    { value: 'day',   label: 'Day' },
    { value: 'week',  label: 'Week' },
    { value: 'month', label: 'Month', disabled: true },
  ]}
/>

// Use single-char labels as icon proxies:
<ButtonGroup value="grid" onChange={setV}
  items={[
    { value: 'list', label: '☰' },
    { value: 'grid', label: '⊞' },
    { value: 'map',  label: '◫' },
  ]}
/>