ButtonGroup

여러 Button을 하나의 세트로 붙여 놓습니다. 맞닿는 모서리가 깎이고, 공통 prop을 세트에 한 번만 지정할 수 있습니다.

import { Button, ButtonGroup } from 'neba';

<ButtonGroup variant="outline">
  <Button>일간</Button>
  <Button>주간</Button>
  <Button>월간</Button>
</ButtonGroup>;

Props

Prop	타입	기본값	설명
variant공통	'solid' | 'outline' | 'text'	—	그룹 안의 모든 버튼에 적용됩니다. 지정하지 않으면 Button 자신의 기본값이 그대로 쓰입니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	—	그룹 안의 모든 버튼의 높이와 타입 스케일
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	—	그룹 안의 모든 버튼의 색 역할. 버튼 하나가 자기 색을 따로 지정하면 그쪽이 이깁니다
density공통	'default' | 'compact'	—	그룹 안의 모든 버튼의 가로 여백
elevation공통	0 | 1 | 2 | 3	—	그룹 안의 모든 버튼의 그림자 깊이
orientation공통	'horizontal' | 'vertical'	'horizontal'	버튼이 이어지는 방향. 세로면 위아래 모서리가 깎입니다
disabled	boolean	—	그룹 전체를 한 번에 비활성화합니다
fullWidth	boolean	false	컨테이너 너비만큼 확장하고 버튼이 너비를 균등하게 나눠 가집니다
children	ReactNode	—	Button들. 중간에 다른 요소로 감싸도 그룹의 값은 전달됩니다

color를 제외한 <div>의 native 속성이 그대로 전달됩니다.

예시

공통 prop 전달

variant · size · color · density · elevation · disabled를 그룹에 지정하면 모든 자식 Button에 전달됩니다. 버튼에 직접 지정한 값이 그룹의 값을 덮어쓰므로, 보조 액션들 사이에 danger 버튼 하나만 섞을 수 있습니다.

import { Button, ButtonGroup } from 'neba';

export default function ButtonGroupShared() {
  return (
    <div className="flex flex-col items-start gap-4">
      {/* Set once for the whole group. */}
      <ButtonGroup size="sm" variant="outline" color="secondary">
        <Button>Copy</Button>
        <Button>Duplicate</Button>
        <Button>Archive</Button>
      </ButtonGroup>

      {/* A button can still override what the group said. */}
      <ButtonGroup size="sm" variant="outline" color="secondary">
        <Button>Copy</Button>
        <Button>Duplicate</Button>
        <Button color="danger">Delete</Button>
      </ButtonGroup>
    </div>
  );
}

orientation

vertical은 버튼을 세로로 쌓고 위아래 모서리를 깎습니다.

import { Button, ButtonGroup } from 'neba';

export default function ButtonGroupOrientation() {
  return (
    <div className="flex flex-wrap items-start gap-8">
      <ButtonGroup orientation="horizontal" variant="outline">
        <Button>Left</Button>
        <Button>Centre</Button>
        <Button>Right</Button>
      </ButtonGroup>

      <ButtonGroup orientation="vertical" variant="outline">
        <Button>Top</Button>
        <Button>Middle</Button>
        <Button>Bottom</Button>
      </ButtonGroup>
    </div>
  );
}

fullWidth

그룹을 컨테이너 너비만큼 늘리고, 버튼들이 공간을 균등하게 나눠 갖습니다.

import { Button, ButtonGroup } from 'neba';

export default function ButtonGroupFullWidth() {
  return (
    <div className="w-full max-w-md">
      <ButtonGroup fullWidth variant="outline" color="secondary">
        <Button>Cancel</Button>
        <Button>Save draft</Button>
        <Button>Publish</Button>
      </ButtonGroup>
    </div>
  );
}

접근성

• role="group"으로 렌더링됩니다. 버튼 라벨만으로 세트의 목적을 알 수 없다면 aria-label을 붙이세요.
• 선택 상태를 관리하지 않습니다. 여럿 중 하나를 고르는 컨트롤이라면 SegmentedButton이나 RadioGroup을 쓰세요.
• hover되거나 focus된 버튼이 이웃보다 위로 올라오므로 focus ring이 잘리지 않습니다.