Components

Button

Docs

API 사용가이드 및 옵션값을 설명합니다. 기본 스타일·프리뷰는 Overview를 참고하세요.

API

라벨은 children, size 기본값은 medium입니다. className에 사이즈 유틸이 있으면 size 기본 박스보다 우선합니다. 아이콘은 Button이 제공하지 않으며, 소비 앱에서 렌더한 노드를 iconLeft · iconRight로 전달합니다.

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

<Button variant="primary">저장</Button>

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

{/* 소비 앱: className으로 버튼 박스 커스텀 */}
<Button className="h-10 px-5 text-base">커스텀 박스</Button>

<button
  type="button"
  className={buttonVariants({ variant: "ghost", className: "h-8 px-3" })}
  aria-label="닫기"
>
  ×
</button>

Props

Name	Type	Default	Description
`children`Required	`React.ReactNode`	—	버튼 라벨. 텍스트/노드를 전달하며, text-sm·font-semibold 등 타이포는 children에 직접 지정해 커스텀합니다.
`variant`	`"primary" \| "secondary" \| "tertiary" \| "ghost" \| "link"`	`"primary"`	시각적 위계. Button / buttonVariants에 동일하게 전달합니다. 화면당 Primary는 한 개만 권장합니다.
`size`	`"small" \| "medium" \| "large"`	`"medium"`	버튼 박스 크기(높이·패딩). 생략 시 medium. className에 h-·px- 등이 있으면 size 기본 클래스는 적용하지 않습니다.
`buttonVariants`	`(props: ButtonStyleProps) => string`	—	스타일 함수. variant/size/className → className 문자열. <button className={buttonVariants(...)} /> 형태로 Button 컴포넌트 없이 동일 규칙 적용.
`iconLeft`	`React.ReactNode`	—	라벨 왼쪽 아이콘. 소비 앱에서 SVG·아이콘 컴포넌트를 렌더해 전달합니다. 표시 크기는 해당 노드의 className(size-* 등)으로 조절합니다.
`iconRight`	`React.ReactNode`	—	라벨 오른쪽 아이콘. iconLeft와 동일하게 소비 앱에서 렌더해 전달합니다.
`disabled`	`boolean`	`false`	비활성 상태. 클릭·포커스 상호작용을 막습니다.
`type`	`"button" \| "submit" \| "reset"`	`"button"`	네이티브 button type.
`className`	`string`	—	버튼 루트 추가 클래스. h-·px-·py-* 등 박스 사이즈 유틸을 넣으면 size 기본 박스보다 우선합니다. bg-·hover:bg-·active:bg-·text- 등 색 유틸을 넣으면 variant 기본 색보다 우선합니다.

Events

Name	Signature	Description
`onClick`	`(event: MouseEvent<HTMLButtonElement>) => void`	클릭 핸들러. disabled이거나 previewState가 disabled이면 호출되지 않습니다.
`onFocus / onBlur`	`(event: FocusEvent<HTMLButtonElement>) => void`	포커스 진입·이탈. a11y·폼 연동 시 사용합니다.

Notes

소비 앱 필수: React 19, Tailwind CSS v4, tokens.css + clabi-theme.css, clsx.
clsx 패키지가 필수입니다. buttonVariants·className 병합에 import { clsx } from "clsx" 를 사용합니다.
size 기본값은 medium입니다. className에 사이즈 유틸이 있으면 size 기본 클래스를 넣지 않습니다.
className에 bg-*·hover:bg-*·active:bg-*·text-* 등 색 유틸이 있으면 variant 기본 색을 넣지 않습니다. hover·pressed까지 함께 전달하세요. 기본은 ClaBi 디자인 토큰을 준수합니다.
라벨 타이포는 children에 클래스를 전달해 커스텀할 수 있습니다.
native button 속성은 그대로 전달할 수 있습니다 (aria-*, form, name 등).
아이콘만 있는 버튼은 children에 접근성용 텍스트를 두거나 aria-label을 지정합니다.
Ghost variant는 시각적으로 링크에 가깝지만 여전히 <button>입니다. 페이지 이동은 Link/router와 조합하세요.