Molecules
원자들이 모여 만들어진 작은 조합 — 카드, 알림, 탭, 메뉴, 그리고 모바일 셸 요소까지. 실제 화면을 구성하는 패턴입니다.
19 components
Accordion
접고 펼치는 섹션 — FAQ와 촘촘한 설정 화면에. 첫 항목이 열린 기본 상태입니다.
Alert
화면 안에 머무는 상태 배너 — info · success · warning · danger. 제목과 닫기 버튼은 선택입니다.
새 업데이트가 있습니다
버전 2.4가 준비되었습니다. 지금 새로고침하여 최신 기능을 사용해 보세요.
저장됨
변경 사항이 반영되었습니다.
결제 정보를 확인해 주세요. 카드 유효기간이 곧 만료됩니다.
오류 (Error)
네트워크 연결을 확인하세요. 다시 시도해도 문제가 계속되면 지원팀에 문의해 주세요.
AppBar
모바일 상단 바 — 좌·우 아이콘 슬롯과 타이틀. 중앙 정렬(iOS)과 좌측 정렬(Material) 두 가지.
홈
받은 편지함
BarChart
세로 막대 + 값 직접 표기(색만으로 의미 전달 안 함). 막대는 모노톤, 강조 하나만 액센트.
Breadcrumb
계층 안에서 현재 위치를 보여줍니다 — 마지막 항목이 현재 페이지입니다.
Card
기본 표면 컨테이너 — 헤더·본문·푸터 구성, interactive(호버 시 떠오름), flat(그림자 없음).
주간 리포트
이번 주 활성 사용자가 지난주 대비 꾸준히 증가했습니다. 자세한 내용은 대시보드에서 확인하세요.
Accent 디자인 시스템
클릭하면 살짝 떠오릅니다 →
중첩·임베드용 플랫 카드입니다. 그림자가 없어 다른 표면 위에 자연스럽게 얹힙니다.
Combobox
검색형 단일 선택 — 타이핑으로 필터, 화살표·Enter로 선택. WAI-ARIA combobox + listbox. (열린 상태 표시)
- Seoul
- Seongnam
- Sejong
DonutChart
전체 대비 비율 — 범례가 색·라벨·값을 함께 보여줘 색맹도 구분 가능. chart-1은 브랜드를 따릅니다.
- Direct45 · 45%
- Search30 · 30%
- Social25 · 25%
EmptyState
데이터가 아직 없을 때의 친절한 자리표시자 — 아이콘, 제목, 설명, 행동 버튼.
아직 작업이 없어요
첫 프로젝트를 추가하면 여기에 표시됩니다. 팀을 초대하고 함께 시작해 보세요.
ListRow
모바일 리스트 항목 — 좌·우 슬롯과 제목·부제. 설정, 받은 편지함, 피드에서 사용합니다.
Pagination
페이지 이동 — 긴 범위는 줄임표(…)로 접힙니다. 현재 페이지는 잉크 채움, 양 끝에서 화살표 비활성화.
SegmentedControl
간결한 단일 선택 토글 — 짧고 상호 배타적인 2–4개 옵션에 적합합니다.
Stat
단일 KPI — 라벨, 큰 등폭 숫자 값, 선택적 추세 델타. Card 안에 넣어 지표 타일을 구성합니다.
Stepper
순서가 있는 다단계 흐름의 진행 상태 — 완료(체크) · 현재(강조색) · 예정(흐림).
Tabs
밑줄형 탭 바 — 선택된 탭에 강조색 밑줄이 그어집니다. (제어형)
선택된 “작업” 탭의 내용이 여기에 표시됩니다. 탭은 제어형으로, value와 onChange를 직접 관리합니다.
Toast
떠 있는 알림 카드 — Alert와 변형·아이콘을 공유합니다. 일시적 피드백에 사용하세요.
업로드 완료
파일이 저장되었습니다.
동기화 중
3개 항목을 업데이트하고 있습니다.
저장 공간 부족
남은 용량이 5% 미만입니다.
전송 실패
네트워크를 확인한 뒤 다시 시도하세요.
Tooltip
호버·포커스 시 나타나는 작은 라벨 — 반전(어두운) 표면. top · bottom · left · right. (항상 보이도록 고정 표시)