Components

Button

Overview

버튼은 사용자가 액션을 실행할 수 있도록 유도하는 인터랙티브 컴포넌트입니다. 컴포넌트의 색상, 크기, 간격등은 default는 디자인 토큰을 따르되, 클래스명으로 커스텀 스타일링 할 수 있습니다. 클라비 내부 프로젝트는 디자인 토큰을 따르기를 권장하지만, 소비 앱에서는 클래스명으로 커스텀 스타일링 할 수 있습니다.

Variants

버튼의 시각적 강도는 액션의 중요도를 결정합니다. 한 화면 안에서 위계가 명확하게 구분되도록 조합해서 사용합니다.

Primary페이지에서 가장 중요한 액션에 사용합니다.
SecondaryPrimary를 보조하는 액션에 사용합니다.
Tertiary보조적이거나 부가적인 액션에 사용합니다.
Ghost배경 없이 가벼운 액션에 사용합니다.

Primary

Secondary

Tertiary

Ghost

Sizes

size prop 기본값은 medium입니다. small / medium / large와 className 커스텀 박스를 확인합니다.

Small밀도 높은 UI·보조 액션에 사용합니다.
Medium기본 크기입니다.
Large강조가 필요한 주요 CTA에 사용합니다.

Small

Medium

Large

Custom className

With icon

아이콘은 버튼이 기본 제공하지 않습니다. 소비 앱에서 아이콘을 렌더해 iconLeft · iconRight로 전달하고, 크기는 해당 노드 className으로 조절합니다.

Both IconiconLeft · iconRight로 라벨 양쪽에 배치합니다.
Left IconiconLeft로 라벨 왼쪽에 배치합니다.
Right IconiconRight로 라벨 오른쪽에 배치합니다.

Both Icon

Left icon

Right icon

버튼은 아이콘을 기본 제공하지 않습니다. 소비 앱에서 아이콘을 렌더해 iconLeft· iconRight로 전달하고, 표시 크기는 해당 노드의 className(예: size-4 md:size-6)으로 조절합니다. 아래 프리뷰는 카탈로그용 예시이며, Docs API 예시는 소비 앱 형태입니다.

import { Button } from "@/components/button";
import { BookmarkIcon, ChevronIcon } from "@/icons"; // 소비 앱 아이콘

{/* 아이콘은 소비 앱에서 렌더해 전달 — 크기는 className으로 */}
<Button
  iconLeft={<ChevronIcon className="size-4 md:size-[18px] -rotate-90" />}
  iconRight={<BookmarkIcon className="size-4 md:size-6" />}
>
  북마크
</Button>

<Button iconRight={<BookmarkIcon className="size-4" />}>다음</Button>

States

인터랙션 상태(Default · Hovered · Pressed · Disabled · Focus)를 variant별로 나란히 비교합니다. 프리뷰에서 강제 표시합니다.

Default기본 상태입니다.
Hovered포인터가 올라간 상태입니다.
Pressed클릭/터치 중인 상태입니다.
Disabled비활성 상태로 상호작용할 수 없습니다.
Focus키보드 포커스 링이 보이는 상태입니다.

Variant	Default	Hovered	Pressed	Disabled	Focus
Primary
Secondary
Tertiary
Ghost