03 · Components · 액션
버튼Button
사용자가 무언가를 실행하고 싶을 때 누르는 컨트롤. 한 화면 안에는 주요 동작 1개, 보조 동작 1~2개만 두는 것이 원칙입니다.
StableWCAG AA
변형
주님의교회 PCL 버튼은 primary · secondary · ghost · danger 네 개 변형을 제공합니다. 한 화면에 주요 액션이 두 개 이상 보이지 않도록 계획하세요.
tsx
<div className="flex flex-wrap items-center gap-3">
<Button variant="primary">저장</Button>
<Button variant="secondary">취소</Button>
<Button variant="ghost">더 보기</Button>
<Button variant="danger">삭제</Button>
</div>미리보기
크기
세 가지 크기 — sm / md / lg. 기본은 md이며 폼 필드 옆에는 sm, 히어로 CTA에는 lg.
tsx
<div className="flex items-center gap-3">
<Button size="sm">작은 버튼</Button>
<Button size="md">기본 버튼</Button>
<Button size="lg">큰 버튼</Button>
</div>미리보기
상태
tsx
<div className="flex items-center gap-3">
<Button>기본</Button>
<Button disabled>비활성</Button>
</div>미리보기
버튼은 사용자가 실행할 동작을 가리킵니다. 화면 이동에는 링크(<a>)를 쓰세요. 버튼 안 아이콘만 있는 경우 반드시 aria-label을 제공합니다.
설치
주님의교회 PCL 디자인 시스템 저장소에 자동 포함. 독립 사용 시 components/ui/Button.tsx 파일 하나와 lib/utils/cn.ts 유틸만 복사하면 됩니다.
기본 사용
Button.example.tsxtsx
import { Button } from "@/components/ui/Button";
<Button variant="primary" onClick={handleSave}>
저장
</Button>미리보기
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "secondary" | "ghost" | "danger" | "primary" | 버튼의 시각적 강조 단계. |
size | "sm" | "md" | "lg" | "md" | 버튼 높이와 패딩·폰트 크기. |
fullWidth | boolean | false | true일 때 부모 너비를 꽉 채움. |
disabled | boolean | false | 비활성 상태. 포커스·클릭이 차단됩니다. |
onClick | (e: MouseEvent) => void | 클릭 이벤트 핸들러. 모든 네이티브 button 속성 패스스루. |