버튼 — 주님의교회 PCL 디자인 시스템

1.4.3 Contrast: primary 버튼 텍스트/배경 대비 4.5:1 이상 ✓
2.1.1 Keyboard: Tab으로 포커스, Enter/Space로 실행 ✓
2.4.7 Focus Visible: 전역 focus ring 2px + offset ✓
2.5.5 Target Size: md/lg 크기는 44×44 권장치 이상 ✓

주님의교회 PCL 버튼은 primary · secondary · ghost · danger 네 개 변형을 제공합니다. 한 화면에 주요 액션이 두 개 이상 보이지 않도록 계획하세요.

세 가지 크기 — sm / md / lg. 기본은 md이며 폼 필드 옆에는 sm, 히어로 CTA에는 lg.

버튼은 사용자가 실행할 동작을 가리킵니다. 화면 이동에는 링크(<a>)를 쓰세요. 버튼 안 아이콘만 있는 경우 반드시 aria-label을 제공합니다.

주님의교회 PCL 디자인 시스템 저장소에 자동 포함. 독립 사용 시 components/ui/Button.tsx 파일 하나와 lib/utils/cn.ts 유틸만 복사하면 됩니다.

Button Props
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 속성 패스스루.

버튼Button