WIZ Design System

전 컴포넌트 한눈에#

이 인덱스는 컴포넌트의 이름, 문서 슬러그, 요약, 플랫폼 상태를 한 화면에서 비교하도록 구성한 시각 카탈로그입니다.

각 카드는 컴포넌트 이름, 문서 슬러그, 그리고 가능한 경우 한 줄 요약을 보여줍니다. 카드를 누르면 해당 컴포넌트 문서로 이동합니다. 레이아웃 프리미티브처럼 06 컴포넌트 카탈로그에 개별 페이지가 없는 항목은 07 레이아웃 시스템 등 해당 문서로 연결됩니다.

컴포넌트: 102
카테고리: 10
개별 문서: 89
Flutter: 0

업무 화면에서 반복되는 UI 어휘를 기능 기준으로 정리했습니다. 필터로 범위를 좁히고, 목록에서 웹과 Flutter 적용 상태를 함께 확인하세요.

검색 결과 102건

목록표시

정렬기준

AuthMethodButtonauth-method-buttonWDS 테마 인증 방식 버튼 — 패스키·조직 SSO·비밀번호·이메일·매직링크. 코어 Button(secondary) 위에 코어 아이콘 + 한국어 라벨을 얹은 얇은 래퍼입니다.액션웹Flutter 미지원
Buttonbutton행동 유도 기본 컨트롤 — 3변형(primary·secondary·ghost) × 3크기. 기본 채움은 AA 4.5:1을 보장하고, 높이는 control 토큰으로 Flutter와 공유합니다.액션웹Flutter 미지원
CopyButtoncopy-button클립보드 복사 버튼 — 포털 Copy 패턴 v1 승격. 복사 성공 시 체크 아이콘 2초 전환, 실패는 오류 상태로 가시화합니다.액션웹Flutter 미지원
IconButtonicon-button아이콘 전용 버튼 — aria-label 필수. sm(시각 32px)은 ::after로 44px 히트 영역을 확보하고, 높이는 control 토큰으로 Button과 같은 줄에 정렬됩니다.액션웹Flutter 미지원
LoginMethodslogin-methods인증 방식 버튼을 동등하게 노출하는 그룹 — prominence parity를 풀폭 균등 스택으로 강제하고, 선택적 "또는" 라벨 구분선으로 1차 폼과 방식 목록을 가릅니다.액션웹Flutter 미지원
ProviderButtonprovider-button서드파티 사인인 버튼(Sign in with Apple / Google / Microsoft) — 브랜드 가이드라인이 색·로고·라벨을 고정. prominence parity로 다른 방식과 동등하게 노출합니다.액션웹Flutter 미지원
SegmentedButtonsegmented-button연결된 세그먼트 컨트롤 — single(라디오 그룹)·multi(토글) 선택. BadgeToggle을 정식화한 ADR-012 Track C 컴포넌트입니다.액션웹Flutter 미지원
문서 보기
TextLinktext-link본문 속 텍스트 링크 — color.link 토큰 쌍 소비. external이면 ExternalLinkIcon과 새 탭 기본값, 보조기술에는 "(새 창 열림)"을 알립니다.액션웹Flutter 미지원
아직 선택 없음
Autocompleteautocomplete비동기 태그 입력 콤보박스 — 자유 텍스트로 검색하고 외부 주입 suggestions에서 골라 칩으로 쌓습니다. 서버 조회는 소비자가 onQueryChange로 수행하는 비제어 컴포넌트입니다.입력·선택웹Flutter 미지원
BadgeTogglebadge-toggle필 버튼 단일 선택 그룹 — APG radio group 패턴(roving tabindex + 화살표 이동 + 즉시 선택). 필터 칩 줄에 적합하고 비활성 항목은 건너뜁니다. 비제어(defaultValue) 우선 (DK 사양 승격).입력·선택웹Flutter 미지원

작동 방식#

단일 출처: 배럴의 export * from './<Component>' 한 줄이 곧 인덱스 항목입니다. 컴포넌트 디렉터리를 만들고 배럴에 export를 추가하면 별도 작업 없이 여기에 나타납니다.
메타 병합: 이름은 PascalCase 디렉터리명을, 슬러그는 kebab-case 변환값을 씁니다 (BottomSheet는 bottom-sheet). 요약·상태는 06-components/<slug>.mdx의 frontmatter에서 가져옵니다.
드리프트 0: 코드에 컴포넌트가 추가됐는데 인덱스에서 빠지는 일이 구조적으로 불가능합니다. 도출원이 곧 라이브러리 공개 표면이기 때문입니다.

썸네일(시각 회귀 baseline 재사용)과 per-component 체인지로그는 후속 단계에서 이 인덱스 위에 얹습니다.