Button
중요한 행동(CTA)에 사용하는 가장 높은 시각 위계의 컴포넌트. Variant × Color × Size × Icon Only × Disable 조합으로 총 48개 변형.
Live Preview
Code Snippet
All Variants Matrix
Variant × Color (행) / Size (열) — 각 셀에 Normal / Disabled / Icon-only(Normal·Disabled) 4종.
Interaction States
오버레이 색은 #131315 (Semantic/Label/Normal).
각 variant는 Figma에 매핑된 Interaction Type이 고정되어 있고, Hover / Focus / Pressed 시 해당 가중치(×0.75 / ×1.0 / ×1.5)의 opacity가 적용됩니다.
매핑: Solid·Primary → Strong · Solid·Assistive → Normal · Outlined·Primary → Light · Outlined·Assistive → Light
Usage Notes
- 중요한 행동(CTA)에 사용합니다. 화면 내 가장 높은 시각 위계를 가집니다.
- 한 화면에 Solid·Primary는 1개를 권장합니다. 2개 이상의 동일 위계는 사용자 의사결정에 혼란을 줍니다.
- Outlined·Primary는 보조 액션(취소·뒤로가기·세컨더리 CTA)에 사용합니다.
- Solid·Assistive / Outlined·Assistive는 행 안의 작은 보조 액션 또는 필터 토글에 사용합니다.
- 아이콘과 함께 사용할 수 있습니다. Icon Only는 툴바·아이콘 버튼 그룹에 한해 사용합니다.
- Loading은 비동기 액션 처리 중 텍스트를 가리고 스피너만 표시합니다. 버튼 크기는 유지됩니다.
Spec (Claude 참조용)
JSON 스펙 펼치기
Button/Text
부가적이지만 강조가 필요한 행동에 사용하는 텍스트 버튼. 가장 낮은 시각 위계. 배경·보더 없이 텍스트와 인터랙션 캡슐(±7/6px 외곽)로만 구성. 8 variants (Color × Size × Disable).
Live Preview
Code Snippet
All Variants Matrix
Color (행) × Size (열) — 각 셀에 Normal / Disabled.
Interaction States
인터랙션 캡슐은 버튼 외곽으로 ±7px(Medium) / ±6px(Small) 확장, radius 6px.
매핑: Primary → Interaction/Normal · Assistive → Interaction/Light
Usage Notes
- 부가적이지만 강조가 필요한 행동에 사용합니다. 가장 낮은 시각 위계로 본문 흐름을 끊지 않습니다.
- Solid·Outlined Button과 함께 쓸 때는 보조 액션으로 배치합니다 (예: 모달 푸터의 "취소", 인라인 "더 보기").
- Primary는 강조 색을 사용하므로 한 화면에 과도하게 노출하지 않습니다.
- Assistive는 본문에 자연스럽게 녹는 보조 액션에 사용합니다.
- 아이콘과 함께 사용할 수 있습니다. Leading/Trailing 모두 지원하며 Solid Button과 동일한 Icon 시스템을 공유합니다.
- 인터랙션 영역(클릭 가능 hit area)은 텍스트보다 ±7/6px 확장되어 모바일 터치 정확도를 보장합니다.
Spec (Claude 참조용)
JSON 스펙 펼치기
Button / Icon / Normal
chrome 없는 베어 아이콘 버튼. 색을 자유롭게 바꿔 쓸 수 있고, 인터랙션 영역은 ±8px 외곽으로 확장(40×40 hit area). 가장 낮은 시각 위계. 푸시 배지 지원.
Live Preview
Code Snippet
All Variants Matrix
Disable=False / Disable=True · 단일 사이즈 24×24.
Usage Notes
- 아이콘 자체가 버튼이 됩니다. chrome(배경·보더) 없이 색만으로 클릭 가능을 표현.
- 인터랙션 영역이 ±8px 외곽으로 확장되어 24×24 시각에도 40×40 터치 타겟을 보장합니다.
- 알림/카운트 표시가 필요한 경우 푸시 배지(우상단 점 또는 숫자)를 사용합니다.
- 본문/리스트 안의 보조 액션(좋아요, 북마크, 더보기 등)에 적합합니다.
Spec (Claude 참조용)
JSON 스펙 펼치기
Button / Icon / Outlined
1px 보더의 원형 아이콘 버튼. 다른 요소와 시각적으로 구분이 필요할 때 사용. 중간 시각 위계. 6 variants (Size × Disable). Interaction/Light.
Live Preview
Code Snippet
All Variants Matrix
Size (열) × Normal/Disabled (행 안 그룹).
Usage Notes
- 다른 요소들과 구분이 필요한 보조 액션에 사용합니다 (예: 카드 내 액션, 도구 모음).
- 1px 보더 + 원형 형태로 베어 Normal 보다는 명확하지만 Solid 보다는 부드러운 위계.
- Custom 사이즈는 Compact 컴포넌트(예: 탭 액션, 칩) 안에 들어갈 때 사용합니다.
Spec (Claude 참조용)
JSON 스펙 펼치기
Button / Icon / Solid
채워진 원형 아이콘 버튼. Primary Orange 배경 + 흰색 아이콘. 명확한 강조가 필요한 단독 액션. 높은 시각 위계. 6 variants. Interaction/Strong.
Live Preview
Code Snippet
All Variants Matrix
Size (열) × Normal/Disabled (행 안 그룹). Disabled는 Fill/Normal + backdrop-blur.
Usage Notes
- FAB(Floating Action Button)나 명확한 단독 CTA가 필요할 때 사용 (예: 새 글 작성, 보내기).
- Solid Button(직사각)과 달리 원형 형태로 위치/맥락의 독립성을 강조.
- 한 화면에 1개 이하 권장. 사용자의 시선이 가장 먼저 가는 요소.
Spec (Claude 참조용)
JSON 스펙 펼치기
Icon / Normal
currentColor를 따라가는 모노 아이콘. Button·Input 등 컨테이너 안에서 텍스트 색을 그대로 상속. 24×24 viewBox 기준. 일부 아이콘은 Thick / Small / Tight / Fill props를 지원합니다.
Catalog
카드 클릭 시 우측 패널에서 props를 토글해 볼 수 있습니다.
Spec (Claude 참조용)
JSON 스펙 펼치기
Icon / Color
브랜드 로고. 컬러가 SVG 안에 박혀있어 currentColor의 영향을 받지 않습니다. 별도 props 없이 그대로 사용.
Catalog
컬러
Semantic 컬러 토큰. Figma의 Variable 이름과 1:1 매핑됩니다.
타이포그래피
Pretendard Variable 기반 타입 스케일. Display 1 ~ Label 2.
라운드
코너 반경 토큰. 0px ~ 24px + Full(9999px).