문서 발행 도구 모음
문서 상태와 저장·발행 동작을 하나의 예측 가능한 작업 흐름으로 묶습니다.
- 카테고리
- 동작
- 사용 컴포넌트
button-groupbuttondropdown-menustatus-label
실제 미리보기
사용할 때
사용 기준
초안 저장과 발행처럼 순서와 우선순위가 분명한 문서 작업에 사용합니다.
사용하지 않을 때
서로 관계없는 동작이나 한 개의 단순 제출 버튼에는 사용하지 않습니다.
구조
현재 문서 상태
보조 저장 동작
주요 발행 동작
추가 발행 옵션
상태
draft고정 예시초안 상태와 사용할 수 있는 저장·발행 동작을 함께 보여줍니다.
publish-options직접 조작추가 발행 옵션은 현재 도구 모음의 맥락을 유지한 채 열립니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
publishing고정 예시발행 중에는 중복 실행을 막고 진행 상태를 텍스트로 알립니다.
반응형 동작
작은 화면에서는 상태를 동작 위에 두고 버튼 그룹을 전체 폭으로 배치합니다.
저장, 발행, 추가 옵션의 순서는 화면 크기와 관계없이 유지합니다.
접근성
상태는 텍스트로 표시하고 저장, 발행, 추가 옵션의 키보드 순서를 유지합니다.
사용 예시
import { Button } from "@/components/ui/button"
import { ButtonGroup, ButtonGroupSeparator } from "@/components/ui/button-group"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { StatusLabel } from "@/components/ui/status-label"
<div>
<StatusLabel tone="neutral">Draft</StatusLabel>
<DropdownMenu>
<ButtonGroup label="Document publishing">
<Button variant="secondary">Save draft</Button>
<Button>Publish document</Button>
<ButtonGroupSeparator />
<DropdownMenuTrigger asChild>
<Button aria-label="Open publishing options" size="icon">...</Button>
</DropdownMenuTrigger>
</ButtonGroup>
<DropdownMenuContent align="end">
<DropdownMenuItem>Schedule publication</DropdownMenuItem>
<DropdownMenuItem>Copy preview link</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>관련 문서
소스 경로
components/design-system/recipes/document-publishing-toolbar-demo.tsx소스 보기