ButtonGroup

import { Button, ButtonGroup } from '@/components/ui/Button';

export default function Page() {
  return (
    <ButtonGroup>
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Three</Button>
      <Button>Four</Button>
    </ButtonGroup>
  )
}

import { Button, ButtonGroup, type ButtonVariants } from '@/components/ui/Button';

export default function Page() {
  return (
    <div className="space-y-4">
      {['solid', 'light', 'bordered'].map((item) => (
        <ButtonGroup key={item} variant={item as ButtonVariants['variant']}>
          <Button>One</Button>
          <Button>Two</Button>
          <Button>Three</Button>
          <Button>Four</Button>
        </ButtonGroup>
      ))}
    </div>
  )
}

import { Button, ButtonGroup, type ButtonVariants } from '@/components/ui/Button';

export default function Page() {
  return (
    <div className="space-y-4">
      {['primary', 'secondary', 'warning', 'danger', 'neutral'].map((item) => (
        <ButtonGroup key={item} colors={item as ButtonVariants['colors']}>
          <Button>One</Button>
          <Button>Two</Button>
          <Button>Three</Button>
          <Button>Four</Button>
        </ButtonGroup>
      ))}
    </div>
  )
}

import { Button, ButtonGroup, type ButtonVariants } from '@/components/ui/Button';

export default function Page() {
  return (
    <div className="space-y-4">
      {['xs', 'sm', 'md', 'lg'].map((item) => (
        <ButtonGroup key={item} size={item as ButtonVariants['size']}>
          <Button>One</Button>
          <Button>Two</Button>
          <Button>Three</Button>
          <Button>Four</Button>
        </ButtonGroup>
      ))}
    </div>
  )
}

import { Button, ButtonGroup } from '@/components/ui/Button';

export default function Page() {
  return (
    <ButtonGroup pill>
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Three</Button>
      <Button>Four</Button>
    </ButtonGroup>
  )
}

import { Button, ButtonGroup, type ButtonVariants } from '@/components/ui/Button';

export default function Page() {
  return (
    <ButtonGroup asIcon>
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Three</Button>
      <Button>Four</Button>
    </ButtonGroup>
  )
}

import { Button, ButtonGroup, type ButtonVariants } from '@/components/ui/Button';

export default function Page() {
  return (
    <ButtonGroup asIcon>
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Three</Button>
      <Button>Four</Button>
    </ButtonGroup>
  )
}