Button Group

관련된 버튼들을 그룹으로 묶어 표시하는 컴포넌트

Basic Usage

여러 버튼을 하나의 그룹으로 묶습니다.

tsx

<ButtonGroup>
  <Button variant="outline">Left</Button>
  <Button variant="outline">Center</Button>
  <Button variant="outline">Right</Button>
</ButtonGroup>

Icon Buttons

아이콘 버튼을 그룹으로 묶어 툴바처럼 사용합니다.

tsx

<ButtonGroup>
  <Button variant="outline" size="icon">
    <Bold className="size-4" />
  </Button>
  <Button variant="outline" size="icon">
    <Italic className="size-4" />
  </Button>
  <Button variant="outline" size="icon">
    <Underline className="size-4" />
  </Button>
</ButtonGroup>

Vertical Orientation

세로 방향으로 버튼을 배치합니다.

tsx

<ButtonGroup orientation="vertical">
  <Button variant="outline">Top</Button>
  <Button variant="outline">Middle</Button>
  <Button variant="outline">Bottom</Button>
</ButtonGroup>

With Text

ButtonGroupText를 사용하여 텍스트 라벨을 추가할 수 있습니다.

Page

tsx

<ButtonGroup>
  <ButtonGroupText>Page</ButtonGroupText>
  <Button variant="outline">1</Button>
  <Button variant="outline">2</Button>
  <Button variant="outline">3</Button>
</ButtonGroup>

With Separator

구분선으로 버튼 그룹을 나눌 수 있습니다.

tsx

<ButtonGroup>
  <Button variant="outline">Cut</Button>
  <Button variant="outline">Copy</Button>
  <ButtonGroupSeparator />
  <Button variant="outline">Paste</Button>
</ButtonGroup>

Usage

tsx

import { ButtonGroup } from '@gpters-internal/ui';
import { Button } from '@gpters-internal/ui';

function Example() {
  return (
    <ButtonGroup>
      <Button variant="outline">Option 1</Button>
      <Button variant="outline">Option 2</Button>
      <Button variant="outline">Option 3</Button>
    </ButtonGroup>
  );
}