Skip to Content
ComponentsFoundationToolbar

Toolbar

타이틀과 액션 영역을 가진 페이지/섹션 상단 Toolbar 컴포넌트

개요

Toolbar는 타이틀과 액션 버튼을 한 줄에 배치하는 컴포넌트입니다. 타이틀이 컨테이너를 초과하면 자동으로 truncate 되며, hover 시 Tooltip으로 전체 텍스트를 확인할 수 있습니다.

주요 특징

  • ✅ 자동 Truncation: 타이틀이 넘칠 경우 말줄임 + Tooltip 자동 처리
  • ✅ Heading Level 지정: titleLevel prop으로 시맨틱 heading 레벨 선택
  • ✅ 유연한 Actions: 버튼, ActionButtons 등 자유로운 ReactNode 전달
  • ✅ ReactNode 타이틀: 문자열 외 아이콘 등 포함한 커스텀 타이틀 지원

기본 사용

타이틀과 액션 버튼을 전달합니다.

Page Title

titleLevel

titleLevel prop으로 타이틀의 heading 레벨을 지정합니다. 기본값은 "h4"입니다.

H2 Title

H3 Title

H4 Title (default)

Deprecated: 숫자 형태 titleLevel

이전 버전에서 사용하던 숫자 형태(2 | 3 | 4)는 하위 호환을 위해 동작하지만 deprecated 되었습니다. 문자열 형태("h2" | "h3" | "h4")를 사용하세요.

// ❌ Deprecated
<Toolbar title="Title" titleLevel={2} />
 
// ✅ Recommended
<Toolbar title="Title" titleLevel="h2" />

Truncation + Tooltip

타이틀이 컨테이너 너비를 초과하면 자동으로 말줄임 처리되고, hover 시 Tooltip으로 전체 텍스트가 표시됩니다.

This is a very long toolbar title that should be truncated

ActionButtons 연동

actions에 ActionButtons를 전달하면 공간에 맞게 자동으로 overflow 처리됩니다.

Page Title

ReactNode 타이틀

타이틀에 문자열 외 ReactNode도 전달할 수 있습니다.

📋 Dashboard

API Reference

ToolbarProps

PropTypeDefaultDescription
titleReactNode-타이틀 텍스트 또는 ReactNode
titleLevel"h2" | "h3" | "h4""h4"타이틀 heading 레벨
actionsReactNode-우측 액션 영역
classNamestring-컨테이너 CSS 클래스

titleLevel은 하위 호환을 위해 숫자 2 | 3 | 4도 허용하지만, deprecated 되었습니다. "h2" | "h3" | "h4" 형태를 사용하세요.

기본 사용법

import { Toolbar } from "@vortex/ui-foundation"
 
<Toolbar
  title="페이지 제목"
  titleLevel="h3"
  actions={<Button>액션</Button>}
/>

마이그레이션 가이드

titleLevel 숫자 → 문자열

- <Toolbar title="Title" titleLevel={2} />
+ <Toolbar title="Title" titleLevel="h2" />
 
- <Toolbar title="Title" titleLevel={3} />
+ <Toolbar title="Title" titleLevel="h3" />
 
- <Toolbar title="Title" titleLevel={4} />
+ <Toolbar title="Title" titleLevel="h4" />

접근성

권장 사항

  • ✅ 페이지 당 하나의 주요 Toolbar에 적절한 heading level을 지정하세요
  • ✅ titleLevel을 페이지 구조에 맞게 선택하세요 (페이지 제목은 "h2", 섹션 제목은 "h3" 등)
  • ✅ 타이틀에 의미 있는 텍스트를 사용하세요

관련 컴포넌트

Last updated on
ToggleGroupTree