7onicDESIGN SYSTEM

Button

버튼은 액션을 실행하는 가장 기본적인 인터랙티브 요소입니다. 클릭이나 탭으로 조작하며, 폼 제출이나 내비게이션 등 다양한 용도로 사용합니다.

4
Variants
4
Colors
5
Sizes
Pure
React

Playground

미리보기
solidD
Variant
Color
Size
Radius
Icon
Weight
Width
State
Label
<Button>Button</Button>

Variants

Style

Solid
가장 눈에 띄는 강조 스타일
제출, 저장, 구매
Outline
배경과 어우러지는 중립 스타일
상세 보기, 편집
Ghost
존재감을 최소화한 스타일, 툴바에 적합
툴바, 네비
Link
인라인 액션용 텍스트 링크 스타일
더 보기, 상세

Solid Colors

Default
가장 범용적인 다크 CTA
제출, 저장
Primary
브랜드 강조 액션에 사용
회원가입
Secondary
프라이머리 옆에 배치하는 보조 액션
취소, 뒤로
Destructive
삭제 등 되돌릴 수 없는 조작에 사용
삭제, 리셋

Sizes

xs
높이28px
좌우 패딩10px
Gap4px
아이콘14px
폰트12px
sm
높이32px
좌우 패딩12px
Gap8px
아이콘14px
폰트13px
md
높이36px
좌우 패딩14px
Gap8px
아이콘16px
폰트14px
default
높이40px
좌우 패딩16px
Gap8px
아이콘16px
폰트14px
lg
높이48px
좌우 패딩24px
Gap8px
아이콘16px
폰트16px

터치 타겟: WCAG 2.5.8 기준 최소 24px 터치 영역이 필요합니다. 가장 작은 xs(28px)도 기준을 충족합니다.

Features

With Icons

<Button variant="outline" leftIcon={<Search />}>검색</Button>
<Button variant="outline" rightIcon={<ChevronRight />}>계속</Button>
<Button variant="outline" leftIcon={<Search />} rightIcon={<ChevronRight />}>
  검색하기
</Button>

States

Solid Primary
Outline
// Solid Primary States
<Button color="primary">Default</Button>
<Button color="primary" loading>Loading</Button>
<Button color="primary" disabled>Disabled</Button>

// Outline States
<Button variant="outline">Default</Button>
<Button variant="outline" loading>Loading</Button>
<Button variant="outline" disabled>Disabled</Button>

API

Props

variant"solid"
"solid" | "outline" | "ghost" | "link"

버튼 스타일. 폰트 두께: solid=600, outline/ghost/link=400

color"default"
"default" | "primary" | "secondary" | "destructive"

solid variant 색상 (default=다크, primary=브랜드, secondary=세컨더리, destructive=에러). solid 외에는 무시

size"default"
"xs" | "sm" | "md" | "default" | "lg" | "icon"

버튼 높이와 패딩

radius"default"
"none" | "sm" | "base" | "default" | "lg" | "xl" | "2xl" | "3xl" | "full"

모서리 둥글기 크기 (6px)

fullWidthfalse
boolean

너비 100%로 표시

loadingfalse
boolean

로딩 상태

disabledfalse
boolean

비활성 상태

leftIconundefined
ReactNode

왼쪽 아이콘

rightIconundefined
ReactNode

오른쪽 아이콘

fontWeightundefined
"normal" | "semibold"

폰트 두께 오버라이드. 미지정 시 variant 기본값 (solid=600, outline/ghost/link=400). 우선순위: 직접 prop > ButtonGroup 컨텍스트 > variant 기본값

selectedfalse
boolean

선택 상태 (outline/ghost만 대응). outline은 bg-background-muted, ghost는 font-semibold. 다른 variant에서는 효과 없음

pressEffectundefined
boolean

프레스 이펙트 (active:scale-pressed). 미지정 시 true로 동작. false로 비활성화

asChildfalse
boolean

Slot으로 렌더링

Anatomy

1
2
3
Button
1
Container
외곽 · border-radius · 배경색
2
Icon
좌우 배치 가능 · 선택사항
3
Label
텍스트 라벨 · 필수
4
Gap
요소 간 여백

Best Practices

✓

권장

  • ✓페이지당 프라이머리 버튼 1개
  • ✓액션 지향 라벨 ("제출", "저장")
  • ✓비동기 작업에는 로딩 상태 표시
  • ✓충분한 터치 영역 확보 (WCAG 2.5.8: 24px 이상)
✕

지양

  • ✗프라이머리 버튼을 여러 개 나란히 배치하지 않기
  • ✗"여기를 클릭"과 같은 모호한 라벨 피하기
  • ✗이유 없이 버튼을 비활성화하지 않기
  • ✗안전한 조작에 destructive 사용하지 않기

Accessibility

키보드 조작

Tab포커스 이동
Enter버튼 실행
Space버튼 실행

WCAG 2.2 준수

  • 대비율 4.5:1 이상
  • 포커스 인디케이터
  • 네이티브 disabled 속성
  • aria-busy (로딩 시 자동 부여)
  • aria-hidden (아이콘에 자동 부여)
  • aria-pressed (선택 시 자동 부여)