Button Group

설치 확인

붙어 있는 버튼 묶음

1. 목적과 출처

붙어 있는 버튼 묶음

출처: shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
프로젝트: src/components/ui/button-group.tsx
Registry: @adcapsule/button-group

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Button Group 쓰임
쓰임	모양
외곽선 묶음
나눠진 실행 버튼
세로 orientation="vertical"

3. 속성 바꿔 보기

orientation

구분선글자 칸

<ButtonGroup aria-label="편집">
  <Button variant="outline">수정</Button>
  <Button variant="outline">복사</Button>
  <Button variant="outline">삭제</Button>
</ButtonGroup>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/button-group

npm 패키지: @base-ui/react, class-variance-authority
함께 설치: @adcapsule/separator, @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

import { ButtonGroup } from "@/components/ui/button-group"

<ButtonGroup aria-label="기간">
  <Button variant="outline">오늘</Button>
  <Button variant="outline">이번 주</Button>
</ButtonGroup>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

orientation: horizontal·vertical
ButtonGroupSeparator로 구분선
ButtonGroupText로 글자 칸
aria-label로 묶음 이름

공통으로 유지할 토큰

radius.md (묶음 양 끝 6px, 안쪽은 0)
border.strong (구분선, --input)
surface.raised (글자 칸, --muted)

Button Group

설치 확인

붙어 있는 버튼 묶음

1. 목적과 출처

붙어 있는 버튼 묶음

출처: shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
프로젝트: src/components/ui/button-group.tsx
Registry: @adcapsule/button-group

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Button Group 쓰임
쓰임	모양
외곽선 묶음
나눠진 실행 버튼
세로 orientation="vertical"

3. 속성 바꿔 보기

orientation

구분선글자 칸

<ButtonGroup aria-label="편집">
  <Button variant="outline">수정</Button>
  <Button variant="outline">복사</Button>
  <Button variant="outline">삭제</Button>
</ButtonGroup>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/button-group

npm 패키지: @base-ui/react, class-variance-authority
함께 설치: @adcapsule/separator, @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

import { ButtonGroup } from "@/components/ui/button-group"

<ButtonGroup aria-label="기간">
  <Button variant="outline">오늘</Button>
  <Button variant="outline">이번 주</Button>
</ButtonGroup>

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿