Components
Button
Basic interaction component to trigger user actions
Overview
Button triggers actions or events on click. Use it for form submissions, opening dialogs, executing operations, and more.
Variants
Use primary for the main action on a page, and secondary for supporting actions.
Sizes
- sm: Suited for dense UIs or inline actions
- md: Default. Suited for most use cases
- lg: Suited for hero sections or primary CTAs
Full Width
Use isFullWidth to make the button span the full width of its parent container. Useful for mobile layouts or form footers.
Disabled State
A disabled button indicates that the action is unavailable in the current state.
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
variant | 'primary' | 'secondary' | 'primary' | No | 시각적 위계. primary 는 한 섹션에 하나만 사용한다. |
size | 'sm' | 'md' | 'lg' | 'md' | No | 버튼 크기 |
isFullWidth | boolean | false | No | 부모 너비를 가득 채울지 여부 |
disabled | boolean | false | No | 비활성 여부 |
type | 'button' | 'submit' | 'reset' | 'button' | No | 버튼 타입. 기본값이 button 이라 form 안에서도 명시하지 않으면 제출하지 않는다. |
onClick | MouseEventHandler<HTMLButtonElement> | - | No | 클릭 핸들러 |
children | ReactNode | - | Yes | 버튼 내용 |
className | string | - | No | 추가 CSS 클래스 |
aria-label | string | - | No | 접근성 레이블 |
ref | Ref<HTMLButtonElement> | - | No | button 엘리먼트 ref |
Specification
base
| 상태 | 요소 | 속성 | 값 |
|---|---|---|---|
| enabled | root | borderRadius | $size.radius.200 |
| enabled | root | borderWidth | $size.stroke.border |
| enabled | root | typography | $text.singleLine.bodyBase |
| enabled | label | color | $color.text.default.default |
| focusVisible | root | outlineWidth | $size.stroke.focus |
| focusVisible | root | outlineStyle | solid토큰 아님 — 선 모양 토큰 부재 |
| focusVisible | root | outlineColor | $color.border.focus.default |
| focusVisible | root | outlineOffset | 2px토큰 아님 — 링 간격 토큰 부재. focusRing.ts의 focusRingOutside와 같은 값 |
variant=primary
| 상태 | 요소 | 속성 | 값 |
|---|---|---|---|
| enabled | root | backgroundColor | $color.background.brand.default |
| enabled | root | borderColor | $color.border.brand.default |
| enabled | label | color | $color.text.brand.onBrand |
| hover | root | backgroundColor | $color.background.brand.defaultHover |
| hover | label | color | $color.text.brand.onBrand |
| disabled | root | backgroundColor | $color.background.disabled.default |
| disabled | root | borderColor | $color.border.disabled.default |
| disabled | label | color | $color.text.disabled.default |
variant=secondary
| 상태 | 요소 | 속성 | 값 |
|---|---|---|---|
| enabled | root | backgroundColor | $color.background.default.default |
| enabled | root | borderColor | $color.border.default.default |
| enabled | label | color | $color.text.brand.default |
| hover | root | backgroundColor | $color.background.default.defaultHover |
| hover | label | color | $color.text.default.default |
| disabled | root | backgroundColor | $color.background.disabled.default |
| disabled | root | borderColor | $color.border.disabled.default |
| disabled | label | color | $color.text.disabled.default |
size=md
| 상태 | 요소 | 속성 | 값 |
|---|---|---|---|
| enabled | root | padding | $size.space.300 |
| enabled | root | height | 2.5rem토큰 아님 — sizing 토큰 스케일 부재 |
size=lg
| 상태 | 요소 | 속성 | 값 |
|---|---|---|---|
| enabled | root | padding | $size.space.400 |
| enabled | root | height | 3rem토큰 아님 — sizing 토큰 스케일 부재 |
Usage Guidelines
Do
- Use a primary button for the most important action on a page
- Use secondary buttons for supporting or less important actions
- Keep button labels concise and action-oriented
Don't
- Don't use more than one primary button per section
- Don't disable a button without explaining the reason
- Don't use generic labels like "Click here"