Button
Stable사용자가 행동을 시작하거나 선택을 완료할 때 사용하는 컴포넌트입니다.
Overview
Button은 인터페이스의 주요 행동을 전달합니다. 중요도에 맞는 시각적 강조와 명확한 레이블로 다음 행동을 예측할 수 있게 합니다.
<Button variant="solid" size="md">
시작하기
</Button>하나의 화면, 하나의 주요 행동. Solid 버튼은 가장 중요한 행동에 사용하세요.
Anatomy
컨테이너와 레이블이 기본 구조를 이루며, 아이콘은 행동의 의미를 보완합니다.
1. 컨테이너는 클릭 영역입니다. 2. 레이블은 행동을 설명합니다. 3. 장식용 아이콘에는 aria-hidden을 적용합니다.
번호는 구성 요소를 구분하기 위한 표시이며, 배치 순서를 뜻하지 않습니다. 아이콘(3)은 행동의 의미에 따라 레이블(2) 앞이나 뒤에 배치할 수 있습니다. 즉, 1번 컨테이너 안에서 3 → 2 또는 2 → 3 순서를 모두 사용할 수 있습니다.
Variants
원본의 일곱 가지 Button 스타일을 사용합니다.
Solid
가장 중요한 주요 행동
variant="solid"Secondary
보조 행동을 위한 단색 버튼
variant="secondary"Line
테두리로 구분하는 행동
variant="line"Line icon
아이콘 전용 테두리 버튼
variant="line-icon"Circle light
밝은 원형 아이콘 버튼
variant="circle-light"Circle dark
어두운 원형 아이콘 버튼
variant="circle-dark"Solid light
밝은 단색 버튼
variant="solid-light"Sizes
원본 Component 크기 9가지를 제공합니다. 기본 md는 40px이며, 터치 환경에서는 lg(44px) 이상을 권장합니다.
………………………| Size | Height | Padding X | Font size |
|---|---|---|---|
| xxxs | … | … | … |
| xxs | … | … | … |
| xs | … | … | … |
| sm | … | … | … |
| md | … | … | … |
| lg | … | … | … |
| xl | … | … | … |
| xxl | … | … | … |
| xxxl | … | … | … |
States
마우스를 올리거나 누르고, Tab으로 이동해 실제 상태를 확인하세요. Hover·Pressed·Focus는 아래에서 시각적으로 고정한 예시입니다.
키보드도 같은 경험으로. Tab으로 포커스를 이동하고 Enter 또는 Space로 실행합니다. Disabled와 Loading은 실행을 차단합니다.
Guidelines
권장해요
“변경사항 저장”처럼 구체적인 동사로 작성합니다.
주요 행동은 Solid 하나로 명확하게 표현합니다.
로딩 중에는 “저장 중”처럼 현재 상황을 설명합니다.
피해주세요
“여기 클릭”처럼 결과를 알 수 없는 레이블을 쓰지 않습니다.
이동에는 버튼 대신 링크를 사용합니다.
색상만으로 의미를 전달하거나 포커스 표시를 제거하지 않습니다.
API
기본 HTML button 속성과 React ref를 지원합니다. 아이콘 전용 버튼에는 aria-label을 제공합니다. 기본 type은 의도하지 않은 폼 제출을 방지하는 button입니다.
| Prop | Type | Default |
|---|---|---|
variant | solid | secondary | line | line-icon | circle-light | circle-dark | solid-light | "solid" |
size | xxxs | xxs | xs | sm | md | lg | xl | xxl | xxxl | "md" |
disabled | boolean | false |
loading | boolean | false |
fullWidth | boolean | false |
type | "button" | "submit" | "reset" | "button" |
children | ReactNode | — |
…native props | ComponentProps<"button"> | — |
Code Example
'use client';
import { useState } from 'react';
import { Button, buttonVariants, buttonSizes } from '@/components/button';
export default function Example() {
const [saved, setSaved] = useState(false);
return (
<div>
<Button onClick={() => setSaved(true)}>
변경사항 저장
</Button>
<p role="status">{saved ? '저장했습니다.' : ''}</p>
</div>
);
}전역 스타일을 불러온 앱에서 사용합니다. 토큰 연결: --site-gray-0 → --site-text-on-solid → --site-button-solid-default-text