Atoms
가장 작은 단위의 UI 프리미티브 — 더 이상 쪼갤 수 없는 컨트롤과 표시 요소. 모두 시맨틱 토큰을 읽어 라이트/다크에 자동 대응합니다.
18 components
Avatar
사용자 이미지 — 이미지가 없으면 이니셜로 대체, 온라인 상태 점은 선택입니다.
Badge
상태·메타데이터용 작은 알약. 실시간 표시는 dot을 사용합니다.
Button
기본 액션 컨트롤 — 잉크 우선, 단 하나의 핵심 CTA에만 강조색 accent를 사용합니다.
Checkbox
라벨이 있는 체크박스 — 선택 시 강조색 accent로 채워집니다.
Divider
헤어라인 구분선 — 가로 / 세로 / 라벨 포함.
Vertical · 인라인
설정
멤버
IconButton
아이콘 전용 정사각 컨트롤 — 툴바·카드·고밀도 UI용. 항상 라벨을 전달합니다.
Dots
시그니처 인라인 로더 — 강조색 점이 마지막에 착지합니다. 스피너의 브랜드 대안(reduced-motion 안전).
Input
라벨·선행 아이콘·힌트·에러를 갖춘 텍스트 필드. 포커스 링은 강조색 accent.
Progress
강조색 채움의 선형 바 — value(0–100) 또는 indeterminate.
업로드 62% · 41.3MB / 66.7MB
IndeterminateRadio
라벨이 있는 라디오 — 같은 name을 공유해 그룹으로 묶습니다.
Select
커스텀 셰브론을 가진 네이티브 드롭다운 — Input과 동일한 라벨/힌트/에러 계약.
Skeleton
은은한 쉬머가 있는 로딩 플레이스홀더 — block / text / circle. (reduced-motion에서 정지)
Slider
강조색 채움의 범위 입력. value+onChange(제어) 또는 defaultValue(비제어).
Sparkline
축 없는 인라인 추세선 — Stat·테이블 셀에. 마지막 점은 시그니처 강조색 점이고 브랜드를 따릅니다.
Spinner
강조색 호를 가진 원형 로딩 인디케이터 — 항상 aria 라벨을 가집니다.
Switch
즉시 적용되는 설정용 on/off 토글 — 활성 트랙은 강조색 accent.
Tag
칩·라벨 — 필터, 선택된 키워드, 멀티셀렉트 토큰용. onRemove로 × 버튼 표시.
Textarea
세로로 크기 조절 가능한 멀티라인 필드 — Input과 동일한 라벨/힌트/에러 계약.