syidaxdesign system
홈 가격 내 정보
ComponentsInputs

Button Group

함께 사용하는 버튼을 붙여서 하나의 동작 묶음으로 보여줍니다.

<sy-button-group>설치 안내 기본 사용법
Live preview
컴포넌트를 조작하면 여기에 결과가 표시됩니다.
코드 보기
HTML
<sy-button-group variant="default" size="medium">
  <sy-button>이전</sy-button>
  <sy-button>현재</sy-button>
  <sy-button>다음</sy-button>
</sy-button-group>

사용 가이드

#

이전·다음이나 정렬 도구처럼 연관된 동작을 하나로 묶을 때 사용하세요. 단일 선택 값을 저장해야 한다면 Radio의 버튼형이 알맞습니다.

그룹 공통 설정
size와 variant는 자식 Button에 전달됩니다. vertical로 세로 방향을 선택할 수 있습니다.
개별 버튼 설정
disabled와 tooltip은 각 Button에 지정하세요.

예제

#

가로로 묶기

같은 작업 흐름의 동작을 한 줄로 배치합니다.

코드 보기
HTML
<sy-button-group variant="primary">
  <sy-button>이전</sy-button>
  <sy-button>다음</sy-button>
</sy-button-group>

세로로 묶기

좁고 긴 도구 영역에서는 vertical로 세로 묶음을 만듭니다.

코드 보기
HTML
<sy-button-group vertical>
  <sy-button>확대</sy-button>
  <sy-button>원래 크기</sy-button>
  <sy-button>축소</sy-button>
</sy-button-group>

크기

자식 버튼의 크기를 그룹 한 곳에서 관리합니다.

코드 보기
HTML
<div style="display:grid;gap:16px;width:100%">
  <sy-button-group size="small">
    <sy-button>small</sy-button>
    <sy-button>다음</sy-button>
  </sy-button-group>
  <sy-button-group size="medium">
    <sy-button>medium</sy-button>
    <sy-button>다음</sy-button>
  </sy-button-group>
  <sy-button-group size="large">
    <sy-button>large</sy-button>
    <sy-button>다음</sy-button>
  </sy-button-group>
</div>

개별 동작 제한

사용할 수 없는 동작에만 disabled를 지정할 수 있습니다.

코드 보기
HTML
<sy-button-group>
  <sy-button>실행 취소</sy-button>
  <sy-button disabled>다시 실행</sy-button>
</sy-button-group>

API reference

#

이름에 마우스를 올리거나 키보드로 선택하면 적용 코드를 확인할 수 있습니다. 터치 화면에서는 이름을 누르세요.

<sy-button-group>

Properties

Attribute / PropertyTypeDefaultDescription
booleanfalse세로 방향으로 배치합니다.
'default' | 'primary' | 'secondary' | 'borderless''default'컴포넌트의 표시 스타일입니다.
'small' | 'medium' | 'large''medium'컴포넌트의 크기입니다.

Slots

SlotDescription
컴포넌트의 본문 또는 자식 항목입니다.
Design SystemTab 이동 Enter 열기