Toggle Group

'use client';

import { ToggleGroup, ToggleGroupItem } from '@/registry/san-francisco/ui/toggle-group';

export default function ToggleGroupDemo() {
  return (
    <ToggleGroup>
      <ToggleGroupItem value="a">A</ToggleGroupItem>
      <ToggleGroupItem value="b">B</ToggleGroupItem>
      <ToggleGroupItem value="c">C</ToggleGroupItem>
    </ToggleGroup>
  );
}

'use client';

import { ToggleGroup, ToggleGroupItem } from '@/registry/san-francisco/ui/toggle-group';

export default function ToggleGroupDemoVariants() {
  return (
    <>
      <ToggleGroup variant="default">
        <ToggleGroupItem value="a">Default</ToggleGroupItem>
        <ToggleGroupItem value="b">Style</ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup variant="outline">
        <ToggleGroupItem value="a">Outline</ToggleGroupItem>
        <ToggleGroupItem value="b">Style</ToggleGroupItem>
      </ToggleGroup>
    </>
  );
}

'use client';

import { ToggleGroup, ToggleGroupItem } from '@/registry/san-francisco/ui/toggle-group';

export default function ToggleGroupDemoSizes() {
  return (
    <>
      <ToggleGroup size="sm">
        <ToggleGroupItem value="a">Small</ToggleGroupItem>
        <ToggleGroupItem value="b">Size</ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup size="default">
        <ToggleGroupItem value="a">Default</ToggleGroupItem>
        <ToggleGroupItem value="b">Size</ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup size="lg">
        <ToggleGroupItem value="a">Large</ToggleGroupItem>
        <ToggleGroupItem value="b">Size</ToggleGroupItem>
      </ToggleGroup>
    </>
  );
}