Button Group

버튼 그룹은 서로 밀접하게 관련된 버튼들을 일정한 간격으로 묶어 보여줘요.

설치

pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/steel/button-group.json

pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/steel/button-group.json

아래 코드를 components/ui/button-group.tsx 에 복사해요. 그룹 안에는 Button 을 넣어요.

components/ui/steel/button-group.tsx

/** * @title Button Group * @description 관련된 버튼 여러 개를 일정한 간격으로 묶어 하나의 그룹으로 알려줘요. */import * as React from 'react';import { cn } from '@/lib/utils';export interface ButtonGroupProps extends Omit<React.ComponentProps<'div'>, 'role'> {  /** 그룹 안에 넣을 버튼들 */  children?: React.ReactNode;  /** 자동화 테스트용 `data-testid` */  testId?: string;  /** 그룹의 접근성 이름(`aria-label`). `label` 이나 `titleId` 중 하나는 꼭 지정하길 권장해요. */  label?: string;  /** 그룹 제목 요소의 id (`aria-labelledby`) */  titleId?: string;}/** * containers/button-group 스펙 — display:inline-flex, gap:space.050, 자식은 flex: 1 0 auto. * role="group" 으로 묶고, 빈 자식(false/null)은 건너뛴다. */function ButtonGroup({ children, testId, label, titleId, className, ...props }: ButtonGroupProps) {  return (    <div      data-slot="button-group"      data-testid={testId}      role="group"      aria-label={label}      aria-labelledby={titleId}      className={cn('inline-flex gap-ds-050 *:flex-[1_0_auto]', className)}      {...props}    >      {React.Children.toArray(children).filter(Boolean)}    </div>  );}export { ButtonGroup };

Examples

Default

버튼 사이를 4px(space.050) 간격으로 묶고 role="group" 을 붙여요. label 로 그룹 이름을 알려줘요.

With primary action

그룹의 핵심 액션은 primary 로 강조할 수 있어요. 모달이나 집중된 작업에서는 그룹을 오른쪽에 정렬하고 primary 를 끝에 둬요.

스프린트를 완료하면 끝나지 않은 이슈 3개가 백로그로 이동해요.

화면에 보이는 제목이 있으면 그 요소의 id 를 titleId 로 넘겨 aria-labelledby 로 연결해요. 아이콘 버튼도 함께 묶을 수 있어요.

페이지 액션

Compact

표나 툴바처럼 좁은 곳에서는 안쪽 버튼을 모두 spacing="compact" 로 맞춰요.

Usage guidelines

버튼 그룹은 자주 쓰고 서로 관계가 깊은 액션을 한데 모을 때 써요. 이슈 상세 화면 상단의 액션 모음이나 문서 편집 화면의 도구 모음처럼 페이지 위쪽에 자주 놓이고, 폼과 모달 다이얼로그에서도 많이 써요.

Do· 한 가지 변형으로

그룹 안 버튼은 같은 spacing·같은 계열 appearance 로 맞추고, 핵심 액션 하나만 primary 로 둬요.

Don't· 섞어 쓰기

default·subtle·warning 을 뒤섞거나 크기를 다르게 하면 무엇이 같은 묶음인지 흐려져요.

쓰임과 중요도에 따라 버튼을 묶고 순서를 정해요.
라벨은 누르면 무슨 일이 생기는지 알 수 있게 짧고 분명하게 써요.
정렬 규칙은 Button 의 가이드를 따라요. primary 는 그룹이 정렬된 쪽 끝에 둬요.

Accessibility

label(aria-label) 또는 titleId(aria-labelledby) 중 하나를 꼭 지정해요. 스크린 리더가 "이슈 액션, 그룹" 처럼 묶음의 이름을 먼저 읽어 줘요.
그룹 자체는 포커스를 받지 않아요. 안쪽 버튼을 Tab 으로 하나씩 이동해요.
비활성 버튼은 가능한 피하고, 비활성 버튼에 툴팁을 달지 않아요.

/** * @title Button Group * @description 관련된 버튼 여러 개를 일정한 간격으로 묶어 하나의 그룹으로 알려줘요. */ import * as React from 'react'; import { cn } from '@/lib/utils'; export interface ButtonGroupProps extends Omit<React.ComponentProps<'div'>, 'role'> { /** 그룹 안에 넣을 버튼들 */ children?: React.ReactNode; /** 자동화 테스트용 `data-testid` */ testId?: string; /** 그룹의 접근성 이름(`aria-label`). `label` 이나 `titleId` 중 하나는 꼭 지정하길 권장해요. */ label?: string; /** 그룹 제목 요소의 id (`aria-labelledby`) */ titleId?: string; } /** * containers/button-group 스펙 — display:inline-flex, gap:space.050, 자식은 flex: 1 0 auto. * role="group" 으로 묶고, 빈 자식(false/null)은 건너뛴다. */ function ButtonGroup({ children, testId, label, titleId, className, ...props }: ButtonGroupProps) { return ( <div data-slot="button-group" data-testid={testId} role="group" aria-label={label} aria-labelledby={titleId} className={cn('inline-flex gap-ds-050 *:flex-[1_0_auto]', className)} {...props} > {React.Children.toArray(children).filter(Boolean)} </div> ); } export { ButtonGroup };

/** * @title Button Group * @description 관련된 버튼 여러 개를 일정한 간격으로 묶어 하나의 그룹으로 알려줘요. */import * as React from 'react';import { cn } from '@/lib/utils';export interface ButtonGroupProps extends Omit<React.ComponentProps<'div'>, 'role'> { /** 그룹 안에 넣을 버튼들 */ children?: React.ReactNode; /** 자동화 테스트용 `data-testid` */ testId?: string; /** 그룹의 접근성 이름(`aria-label`). `label` 이나 `titleId` 중 하나는 꼭 지정하길 권장해요. */ label?: string; /** 그룹 제목 요소의 id (`aria-labelledby`) */ titleId?: string;}/** * containers/button-group 스펙 — display:inline-flex, gap:space.050, 자식은 flex: 1 0 auto. * role="group" 으로 묶고, 빈 자식(false/null)은 건너뛴다. */function ButtonGroup({ children, testId, label, titleId, className, ...props }: ButtonGroupProps) { return ( <div data-slot="button-group" data-testid={testId} role="group" aria-label={label} aria-labelledby={titleId} className={cn('inline-flex gap-ds-050 *:flex-[1_0_auto]', className)} {...props} > {React.Children.toArray(children).filter(Boolean)} </div> );}export { ButtonGroup };

Button Group

설치Copy Anchor Link

수동 설치

ExamplesCopy Anchor Link

DefaultCopy Anchor Link

With primary actionCopy Anchor Link

Toolbar with titleCopy Anchor Link

페이지 액션

CompactCopy Anchor Link

Usage guidelinesCopy Anchor Link

AccessibilityCopy Anchor Link

PropsCopy Anchor Link

On this page

페이지 액션

설치

Examples

Default

With primary action

Toolbar with title

Compact

Usage guidelines

Accessibility

Props