Component

ButtonGroup

관련된 여러 버튼의 배치 방향과 간격을 정합니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

자식 버튼 기본 크기

자식 action의 방향

인접 action을 시각적으로 붙입니다

attached일 때 바깥쪽 끝을 둥글게 표시합니다

좁은 화면에서 전체 너비로 세로 배치

Code

import { ButtonGroup, Button } from '@amineslab/ui'

export default function ExamplePreview() {
  return ((<ButtonGroup size={"md"} attached={false} className={"mx-auto w-fit"} rounded={false} fullWidth={false} orientation={"horizontal"}>
      <Button variant="outline">취소</Button>
      <Button variant="outline">임시 저장</Button>
      <Button>저장</Button>
    </ButtonGroup>))
}

Props

@amineslab/ui에서 ButtonGroup를 가져옵니다.

import { ButtonGroup } from '@amineslab/ui'

`ButtonGroup`

HTML <div> 요소의 표준 속성을 그대로 받습니다.

Name	Type	Default	Description
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	-	자식 Button·IconButton의 기본 사이즈입니다. 자식의 명시적 size가 우선합니다.
`rounded`	`boolean`	`false`	attached일 때 첫 버튼과 마지막 버튼의 바깥쪽 모서리를 둥글게 표시합니다.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	자식 버튼의 배치 방향입니다.
`attached`	`boolean`	`false`	인접한 버튼의 테두리를 연결합니다.
`fullWidth`	`boolean`	`false`	좁은 화면에서 자식을 전체 너비로 세로 배치합니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

Attached

같은 대상에 대한 연속 action을 한 덩어리로 보여 줍니다.

import { ButtonGroup, Button } from '@amineslab/ui'

export default function ExamplePreview() {
  return ((<ButtonGroup attached>
          <Button variant="outline">일</Button>
          <Button variant="outline">주</Button>
          <Button variant="outline">월</Button>
        </ButtonGroup>))
}

Vertical

import { ButtonGroup, Button } from '@amineslab/ui'

export default function ExamplePreview() {
  return ((<ButtonGroup orientation="vertical">
          <Button variant="outline">복제</Button>
          <Button variant="outline">이름 바꾸기</Button>
          <Button color="danger">삭제</Button>
        </ButtonGroup>))
}

사용 기준

권장하는 사용

좁은 화면에서는 fullWidth로 버튼을 세로 배치합니다.

피해야 할 사용

서로 관계없는 작업을 한 그룹으로 묶지 마세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

Tab: 각 자식 작업으로 포커스 이동
자식 button: Enter 또는 Space로 실행
자식 asChild link: Enter로 실행