한 번 누르고 끝나는 동작을 일으키는 가장 기본 컨트롤.

켜짐/꺼짐 상태를 사용자가 쥐고 유지하는 컨트롤.

툴바와 좁은 영역에서 접근 가능한 이름으로 단일 액션을 실행한다.

입력 폼이나 상세 정보를 현재 화면 위에 띄우는 모달 컨테이너.

삭제 등 되돌릴 수 없는 액션 전에 예/아니오로 확인받는 단일 목적 모달.

누르거나 지울 수 있는 태그: 필터·선택·바로가기.

단추 아래에 패널을 펼친다. 바깥 클릭 · Esc · 안의 항목을 누르면 닫힌다.

행이나 카드 끝의 「⋯」. 링크 · 동작 · 서버 액션 항목을 담고 클릭을 행으로 넘기지 않는다.

text·email·password 입력 필드.

입력창과 그 자리에서 실행하는 버튼을 높이가 어긋나지 않게 한 줄로 묶는다.

목록·표를 좁혀 들어가는 검색창.

메모·설명·본문처럼 여러 줄 텍스트를 입력하는 필드.

옵션 수가 적은 단순 폼 선택용 네이티브 select 래퍼.

입력 컴포넌트에 라벨·도움말·에러를 일관되게 묶는 래퍼.

여러 줄 프롬프트 입력과 제출을 하나의 글라스 패널로 묶는다.

여러 항목을 켜고 끄며 고르는 기본 선택 컨트롤.

소수 옵션 중 하나를 나타내는 단일 선택 컨트롤.

서로 배타적인 라디오 옵션을 하나의 fieldset으로 묶는 선택 그룹.

같은 영역의 표시 모드를 전환하는 컨트롤.

관련 정보를 제목 아래에 접어 두고 필요한 항목만 펼친다.

즉시 적용되는 on/off 설정을 바꾸는 토글 스위치.

많은 선택지를 접어두고 펼쳐 하나를 고르는 컨트롤.

선택 목록과 인라인 생성 폼을 묶는 컨텍스트 스위처.

현재 페이지의 계층과 상위 경로를 시맨틱 navigation으로 보여준다.

달·주·날 단위로 이전·다음 기간 링크와 지금 기간으로 돌아가는 링크를 둔다.

화면 제목 · 보기 전환 · 주 동작을 맨 위 한 줄에 두고 스크롤해도 붙어 있다.

검색 · 칩 · 세그먼트 같은 조건을 메인 툴바 바로 밑 한 줄에 둔다.

제품별 색·곡률·서체 프리셋을 전역에 적용하는 선택 도구.

프리셋과 라이트 · 다크를 한 드롭다운에서 고르는 앱 셸 도구.

라이트와 다크 표시 모드를 전역에서 전환하는 도구.

완료 비율과 진행 상태를 수평 트랙 안에 정량적으로 표시한다.

알려진 범위 안에서 현재 측정값이 차지하는 위치를 표시한다.

숫자 칸마다 0~9 띠가 굴러 값에 멈추는 숫자 텍스트.

시스템이 부여하는 정적 상태를 압축해 보여주는 표시.

처리 결과나 중요한 상태를 맥락 가까이에 지속 표시하는 배너.

로딩 중 실제 콘텐츠의 형태를 암시하는 플레이스홀더.

짧은 액션이나 작은 영역의 진행 중 상태를 나타내는 회전 표시.

hover/focus 때 아이콘이나 짧은 텍스트의 보조 설명을 보여준다.

저장·삭제 등 액션 직후 결과를 짧게 알리고 자동으로 사라지는 전역 알림.

AI가 응답을 준비하는 상태를 움직이는 점과 live status로 알린다.

단축키와 물리 키 입력을 작고 촉각적인 키캡 형태로 표시한다.

문서 고유 ID 를 화면에 띄우지 않고 버튼 하나로 복사하게 한다.

대시보드에서 단일 지표를 아이콘·숫자·라벨로 보여준다.

지표 하나의 값, 앞 기간 대비, 흐름 차트, 하위 지표를 한 장에 담는다.

StatCard 여러 장을 모바일에서는 가로 스크롤 줄, 넓은 화면에서는 격자로 놓는다.

엔티티와 복수 지표를 한 카드에 담는 복합 표시 카드.

서드파티 서비스 연결 상태 카드.

여러 사용자 아바타를 겹쳐 보여주는 스택.

사용자·회사를 식별하는 단일 원형 표시.

제목·시간·참여자 아바타를 묶는 이벤트 표시 카드.

피드·타임라인에서 날짜 단위 경계를 라벨+선으로 드러낸다.

사용자, AI와 시스템 메시지의 발신자와 내용을 구분한다.

AI 답변의 근거가 된 문서 제목, 출처, 요약과 링크를 표시한다.

패딩·배경·테두리·반경으로 내용을 묶는 범용 컨테이너.

제목·설명·액션이 있는 콘텐츠 섹션 컨테이너.

제목·개수·도구줄 머리줄과 꼬리줄을 가진 화면 본문 그릇.

자식을 세로·가로로 일정 간격으로 배치하는 flex 레이아웃.

행·열 격자로 배치하는 레이아웃.

관련 콘텐츠 묶음 사이의 경계를 선택적인 라벨과 함께 표시한다.

용어와 값을 시맨틱 description list로 정렬해 세부 정보를 읽기 쉽게 만든다.

결과·데이터가 없을 때 이유와 다음 행동을 안내하는 표시.

긴 목록 하단에서 이전·다음 페이지 이동과 현재 범위를 표시한다.

읽기 위주 데이터를 시맨틱 table 로 보여주는 단순 표.

많은 행과 열을 고정 헤더와 스크롤 영역 안에서 탐색하는 데이터 표.

직접 쓴 thead·tbody 에 간격, hover, 선택 줄 스타일을 입히는 표 그릇.

표의 줄을 체크박스로 골라, 목록 아래에 떠오르는 바에서 한 번에 처리한다.

목록의 한 줄을 눌러 그 자리에서 상세를 펼치는 details 행.

한 화면 안에서 관련 콘텐츠 섹션을 전환하는 밑줄 탭.

머리 오른쪽에 놓는 작은 링크. 읽는 흐름을 끊지 않는다.

상담으로 넘어가는 금색 단추. 어느 앱에서나 같은 색이다.

글이나 화면을 다 본 사람에게 다음 행동을 제안하는 끝 카드.

iframe 안에서는 감싼 CTA 를 그리지 않는 경계.

다계열 시계열 추이를 선으로. 영역 워시·마지막 값 강조·기준 대비 %·선 끝 라벨 옵션.

카테고리별 값을 그룹·누적 세로 막대로 비교(음수는 0 아래로).

같은 단위의 막대 계열과 선 계열을 한 축에 겹쳐 비교.

부분-전체 분포를 도넛 + 범례로 한눈에.

축·라벨 없는 미니 추이선: StatCard 슬롯용.

단일 비율(0~100)을 반원 진행 게이지로.

행×열 밀도를 단일 색 4단계 불투명도로.

부분-전체를 한 줄 가로 누적 바 + 범례로(도넛의 컴팩트 대안).

3~8개 지표(0~100)의 밸런스를 다각형으로.

비율 지표 2~4개를 동심 링 진행도로(게이지 다지표 버전).

증감 단계가 쌓여 합계에 이르는 구성 분해(손익 등).

카테고리 크기 비교를 가는 스템 + 도트로(막대의 가벼운 대안).

실적 막대 + 목표 눈금 + 평가 구간을 가로 한 줄로.

단계별 수와 단계 사이 전환율.

라벨이 막대 안에 들어가는 가로 순위 목록.

두 지표의 관계를 점으로. 버블 크기와 사분면.

큰 순서 막대 + 누적 비율 선. 소수의 핵심 원인.

날짜 칸마다 밀도. 근태 · 활동 · 예약.

작업의 시작 · 끝과 겹침, 진행률.

같은 눈금의 작은 차트 격자. 지점별 추이.

항목마다 두 값의 이동. 전월 대비.

구성비를 면적으로. 재고 · 경비 구성.

값을 구간으로 묶은 분포. 처리 시간 · 금액.

그룹별 분포를 다섯 수와 이상값으로.

기간별 시가 · 고가 · 저가 · 종가.

단계 사이 흐름의 양을 띠 굵기로.