Button
현재 화면에서 동작을 실행합니다.
- 성숙도
- 안정
- 소스 경로
components/ui/button.tsx- 소스
- 소스
실제 미리보기
사용할 때
사용 기준
저장, 제출, 확인처럼 즉시 실행되는 동작에 씁니다.
사용하지 않을 때
다른 주소로 이동할 때는 Button Link나 Text Link를 씁니다.
변형과 상태
primary고정 예시한 화면의 가장 중요한 동작에만 파란 면을 씁니다.
secondary고정 예시보조 동작은 Paper 면과 1px 선으로 표시합니다.
outline고정 예시채운 면 없이 Ink 경계로 동작을 분명히 구분합니다.
inverse고정 예시어두운 면 위에서 경계와 이름이 선명한지 확인합니다.
ghost고정 예시시각적 무게가 낮아도 조작 영역과 초점 표시는 유지합니다.
icon고정 예시아이콘만 보일 때 접근성 이름과 모바일 44px 조작 영역을 확인합니다.
disabled고정 예시비활성 상태에서 실행되지 않는지 확인합니다.
loading고정 예시이름을 유지하면서 busy 상태를 알리는지 확인합니다.
danger고정 예시파괴적 동작에만 Error Deep과 흰색 전경을 씁니다.
접근성
동작을 설명하는 이름을 유지하고 busy와 disabled 상태를 함께 알립니다. 아이콘 버튼에는 aria-label이 필요합니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
variant | "primary" | "secondary" | "outline" | "inverse" | "danger" | "ghost" | 아니요 | 동작의 위계와 의미를 정합니다. |
size | "compact" | "default" | "icon" | 아니요 | 컨트롤 밀도와 아이콘 전용 크기를 정합니다. |
loading | boolean | 아니요 | 중복 실행을 막고 busy 상태를 알립니다. |
type | "button" | "submit" | "reset" | 아니요 | 기본값은 button입니다. |
children | ReactNode | 예 | 동작 이름 또는 아이콘입니다. |
사용 예시
지원 importimport { Button } from "@/components/ui/button"
<Button type="submit">Save</Button>