Toolbar

버튼, 토글 그룹, 드롭다운 메뉴 같은 일련의 컨트롤을 묶는 컨테이너예요.

출처: 문서

본문

여러 컨트롤을 한 줄에 모아 배치하는 툴바 컴포넌트예요. 버튼, 링크, 토글 그룹, 구분선 등으로 구성되며 키보드 내비게이션을 완전히 지원해요.

Features

완전한 키보드 내비게이션.

Anatomy

컴포넌트를 임포트해요.

import { Toolbar } from "radix-ui";

export default () => (
  <Toolbar.Root>
    <Toolbar.Button />

    <Toolbar.Separator />

    <Toolbar.Link />

    <Toolbar.ToggleGroup>
      <Toolbar.ToggleItem />
    </Toolbar.ToggleGroup>
  </Toolbar.Root>
);

API Reference

Root

툴바 컴포넌트의 모든 파트를 담아요.

Prop	Type	Default
`asChild`	`boolean`	`false`
`orientation`	`enum`	`"horizontal"`
`dir`	`enum`	No default value
`loop`	`boolean`	`true`

Data attribute	Values
`[data-orientation]`	`"vertical" \| "horizontal"`

Button

버튼 아이템이에요.

Prop	Type	Default
`asChild`	`boolean`	`false`

Data attribute	Values
`[data-orientation]`	`"vertical" \| "horizontal"`

Link

링크 아이템이에요.

Prop	Type	Default
`asChild`	`boolean`	`false`

ToggleGroup

켜거나 끌 수 있는 두 가지 상태의 버튼 집합이에요.

Prop	Type	Default
`asChild`	`boolean`	`false`
`type*`	`enum`	No default value
`value`	`string`	No default value
`defaultValue`	`string`	No default value
`onValueChange`	`function`	No default value
`value`	`string[]`	`[]`
`defaultValue`	`string[]`	`[]`
`onValueChange`	`function`	No default value
`disabled`	`boolean`	`false`

Data attribute	Values
`[data-orientation]`	`"vertical" \| "horizontal"`

ToggleItem

그룹의 아이템이에요.

Prop	Type	Default
`asChild`	`boolean`	`false`
`value*`	`string`	No default value
`disabled`	`boolean`	No default value

Data attribute	Values
`[data-state]`	`"on" \| "off"`
`[data-disabled]`	Present when disabled
`[data-orientation]`	`"vertical" \| "horizontal"`

Separator

툴바에서 아이템을 시각적으로 분리하는 데 사용해요.

Prop	Type	Default
`asChild`	`boolean`	`false`

Data attribute	Values
`[data-orientation]`	`"vertical" \| "horizontal"`

Examples

다른 primitive와 함께 사용

Dialog, AlertDialog, Popover, DropdownMenu처럼 Trigger 파트를 노출하는 모든 primitive는 asChild prop으로 툴바 안에 조합할 수 있어요.

DropdownMenu primitive를 사용한 예시예요.

import { Toolbar, DropdownMenu } from "radix-ui";

export default () => (
  <Toolbar.Root>
    <Toolbar.Button>Action 1</Toolbar.Button>

    <Toolbar.Separator />

    <DropdownMenu.Root>
      <Toolbar.Button asChild>
        <DropdownMenu.Trigger>Trigger</DropdownMenu.Trigger>
      </Toolbar.Button>

      <DropdownMenu.Content>…</DropdownMenu.Content>
    </DropdownMenu.Root>
  </Toolbar.Root>
);

Accessibility

아이템 간 포커스 이동을 roving tabindex로 관리해요.

키보드 상호작용

Key	Description
`Tab`	Moves focus to the first item in the group.
`Space`	Activates/deactivates the item.
`Enter`	Activates/deactivates the item.
`ArrowDown`	Moves focus to the next item depending on `orientation`.
`ArrowRight`	Moves focus to the next item depending on `orientation`.
`ArrowUp`	Moves focus to the previous item depending on `orientation`.
`ArrowLeft`	Moves focus to the previous item depending on `orientation`.
`Home`	Moves focus to the first item.
`End`	Moves focus to the last item.

더 알아보기 (Learn more)

Toolbar.Button asChild로 DropdownMenu/Popover 같은 다른 primitive의 트리거를 툴바에 자연스럽게 조합할 수 있어요.
Toolbar는 폼 서밋·에디터 등 같은 성격의 컨트롤을 한 줄로 묶을 때 주로 사용해요.