Skip to Content
ComponentsCalsToolbarButton

ToolbarButton

도구 모음 영역에 배치되는 Primary 스타일 액션 버튼

개요

Cals ToolbarButton은 도구 모음(Toolbar) 영역에서 사용하는 Primary 스타일 버튼입니다. 제목 텍스트와 선택적 아이콘을 표시하며, 단축키 등록, 로딩 상태 관리, 스타일 오버라이드를 지원합니다.

주요 특징

  • ✅ Primary 스타일: 강조 색상의 기본 버튼
  • ✅ 아이콘 지원: 제목 왼쪽에 아이콘 배치
  • ✅ 단축키: shortcut prop으로 키보드 단축키 등록
  • ✅ 로딩 상태: 처리 중 로딩 표시 + 중복 클릭 방지
  • ✅ 스타일 오버라이드: backgroundColor, color, font* 등
  • ✅ 가시성/비활성: visible, disabled prop

기본 사용

아이콘

icon prop으로 제목 왼쪽에 아이콘을 표시합니다.

로딩 상태

loading=true 시 로딩 표시가 나타나고 클릭이 차단됩니다.

비활성 상태

disabled=true 시 클릭과 단축키가 차단되고 비활성 스타일로 표시됩니다.

크기

단축키

shortcut prop으로 키보드 단축키를 등록합니다. disabled/loading 상태에서는 자동 비활성화됩니다.

<ToolbarButton
  title="저장 (Ctrl+S)"
  shortcut={[["ctrl", "s"], ["meta", "s"]]}
  onClick={handleSave}
/>

스타일 오버라이드

backgroundColor, color 등으로 버튼 스타일을 커스터마이즈합니다. hover/active/disabled 색상이 자동 파생됩니다.

API Reference

Props

PropTypeDefaultDescription
titlestring-버튼 제목 텍스트
childrenReactNode-children 우선 렌더링
iconReactNode-제목 왼쪽 아이콘
loadingbooleanfalse로딩 상태
loadingIconReactNode-커스텀 로딩 아이콘
visiblebooleantrue표시 여부
disabledbooleanfalse비활성 상태
shortcutstring[][]-단축키 배열
size"sm" | "md" | "lg""md"버튼 크기
onClick(e) => void-클릭 핸들러
onShortcut() => void-단축키 핸들러 (미지정 시 onClick 호출)
backgroundColorstring-배경색 (파생 색상 자동 생성)
colorstring-텍스트 색상
borderColorstring-테두리 색상
fontSizestring-폰트 크기
fontWeightstring | number-폰트 굵기
fontFamilystring-폰트 패밀리
fontStylestring-폰트 스타일
classNamestring-컨테이너 className
styleReact.CSSProperties-인라인 스타일

Ref

Property/MethodTypeDescription
focus()() => void버튼에 포커스
blur()() => void포커스 해제
elementHTMLButtonElement | nullDOM 요소 직접 접근

접근성

권장 사항

  • ✅ button 역할을 가진 네이티브 요소로 렌더링됩니다.
  • ✅ disabled 시 브라우저 기본 disabled 속성이 적용됩니다.
  • ✅ 키보드(Enter/Space)로 활성화 가능합니다.
  • ✅ 포커스 링이 기본 제공됩니다.

관련 컴포넌트

Last updated on
TimeSelectZipCodeKR