본문으로 건너뛰기

ButtonGroup

버튼 그룹은 관련된 여러 버튼을 하나로 묶어서 보여주는 컴포넌트입니다. 여러 옵션 중 하나를 선택하거나, 그룹화된 버튼을 표시할 때 유용합니다.

인터랙티브 예제​

아래 UI에서 다양한 속성을 직접 변경하여 버튼 그룹의 모습을 확인해보세요.

labelstring
라벨 텍스트
sizeselect
itemsarray
버튼 그룹 아이템
buttonItemobject
아이템 편집
labelstring
iconpreset
isCurrentboolean
현재 선택된 상태
buttonItemobject
아이템 편집
labelstring
iconpreset
isCurrentboolean
현재 선택된 상태
disabledboolean
비활성화 상태
classNamestring
추가 CSS 클래스
hasBorderboolean

기본 사용법​

import { ButtonGroup } from '@ncds/ui-admin';

function App() {
  return (
    <ButtonGroup>
      <ButtonGroup.Item label="버튼 1" onClick={() => console.log('버튼 1 클릭')} />
      <ButtonGroup.Item label="버튼 2" onClick={() => console.log('버튼 2 클릭')} />
      <ButtonGroup.Item label="버튼 3" onClick={() => console.log('버튼 3 클릭')} />
    </ButtonGroup>
  );
}

Props​

ButtonGroup Props​

속성타입기본값설명
childrenReact.ReactNode필수버튼 그룹에 포함될 버튼 아이템
classNamestring-추가 CSS 클래스
size'xs' | 'sm' | 'md' | 'lg''lg'버튼 그룹의 크기
hasBorderbooleantrue테두리 표시 여부
onlyIconbooleanfalse아이콘만 표시할지 여부
disabledbooleanfalse모든 버튼의 비활성화 여부

ButtonGroup.Item Props​

속성타입기본값설명
as'button' | 'a''button'버튼 요소 타입
labelstring-버튼에 표시될 텍스트
iconSideSlotType-아이콘 관련 옵션
onlyIconbooleanfalse아이콘만 표시할지 여부
disabledbooleanfalse버튼 비활성화 여부
childrenReact.ReactNode-추가 컨텐츠
hrefstring-as="a"인 경우 필요한 링크 주소
isCurrentboolean-true인 경우 현재 선택된 버튼 표시

상세 예제​

크기​

버튼 그룹은 네 가지 크기(xs, sm, md, lg)를 지원합니다.

테두리​

hasBorder 속성을 사용하여 테두리 표시 여부를 설정할 수 있습니다.

비활성화​

disabled 속성을 사용하여 버튼 비활성화 상태를 설정할 수 있습니다.

현재 선택된 버튼​

isCurrent 속성을 사용하여 현재 선택된 버튼을 표시할 수 있습니다.

아이콘만 표시​

onlyIcon 속성을 사용하여 텍스트 없이 아이콘만 있는 버튼 그룹을 만들 수 있습니다.

아이콘 색상 및 크기​

icon의 color와 size 속성을 사용하여 아이콘의 색상과 크기를 조절할 수 있습니다.

링크​

as 속성을 사용하여 버튼 그룹을 링크로 사용할 수 있습니다.

페이지 1페이지 2페이지 3

이벤트 핸들링​

각 버튼에 onClick 이벤트 핸들러를 추가할 수 있습니다.