7onicDESIGN SYSTEM

IconButton

IconButton은 아이콘만 표시하는 정사각형 버튼입니다. 툴바, 내비게이션, 컴팩트한 UI에서 사용합니다.

6
Variants
5
Sizes
1:1
Aspect Ratio
Pure
React

Playground

미리보기
solidD
Variant
Color
Size
Radius
Icon
State
<IconButton aria-label="Action">
  <Search />
</IconButton>

Variants

Style

Solid
가장 눈에 띄는 강조 스타일
추가, 제출
Outline
배경과 어우러지는 중립 스타일
정보, 상세
Ghost
존재감을 최소화한 스타일, 툴바에 적합
툴바
Subtle
헤더/사이드바에 어울리는 호버 강조 스타일
헤더, 네비

Solid Colors

Default
가장 범용적인 다크 CTA
추가, 제출
Primary
브랜드 강조 액션에 사용
즐겨찾기
Secondary
프라이머리 옆에 배치하는 보조 액션
설정, 편집
Destructive
삭제 등 되돌릴 수 없는 조작에 사용
삭제, 닫기

Sizes

xs
크기28px
아이콘14px
sm
크기32px
아이콘16px
md
크기36px
아이콘16px
default
크기40px
아이콘20px
lg
크기48px
아이콘24px

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

States

Solid Primary
Outline
Subtle
// Solid primary states
<IconButton color="primary" aria-label="Default"><Pencil /></IconButton>
<IconButton color="primary" loading aria-label="Loading"><Pencil /></IconButton>
<IconButton color="primary" disabled aria-label="Disabled"><Pencil /></IconButton>

// Outline states
<IconButton variant="outline" aria-label="Default"><Pencil /></IconButton>
<IconButton variant="outline" loading aria-label="Loading"><Pencil /></IconButton>
<IconButton variant="outline" disabled aria-label="Disabled"><Pencil /></IconButton>

// Subtle states
<IconButton variant="subtle" aria-label="Default"><Pencil /></IconButton>
<IconButton variant="subtle" loading aria-label="Loading"><Pencil /></IconButton>
<IconButton variant="subtle" disabled aria-label="Disabled"><Pencil /></IconButton>

API

Props

variant"solid"
"solid" | "outline" | "ghost" | "subtle"

버튼 스타일

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

solid variant 색상. solid 외에는 무시

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

버튼 크기 (28/32/36/40/48px)

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

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

loadingfalse
boolean

로딩 상태

disabledfalse
boolean

비활성 상태

pressEffectundefined
boolean

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

asChildfalse
boolean

Slot으로 렌더링

aria-labelundefined
string

접근성 라벨 (필수)

Anatomy

1
2
Container (default)40px × 40px
Icon (default)20px (icon-md)
1
Container
정사각형 (1:1) · border-radius
2
Icon
중앙 배치 · 필수

Best Practices

✓

권장

  • ✓반드시 aria-label을 설정
  • ✓의미가 명확한 아이콘 사용
  • ✓툴팁과 함께 사용
  • ✓모바일에서는 48px 이상 사용
✕

지양

  • ✗aria-label 없이 사용하지 않기
  • ✗모호한 아이콘을 단독으로 사용하지 않기
  • ✗텍스트 버튼 대신 남용하지 않기
  • ✗너무 작은 크기 사용하지 않기

Accessibility

키보드 조작

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

WCAG 2.2 준수

  • 대비율 4.5:1 이상
  • 포커스 인디케이터
  • aria-label 지원 (필수)
  • aria-busy (로딩 시 자동 부여)