Actions
버튼과 링크처럼 사용자가 명시적인 행동을 시작하는 컨트롤입니다.
Ready to continue?
Text Button
Alpha-coded
텍스트로 행동을 분명하게 보여주는 기본 버튼입니다. Primary, Secondary, Quiet 세 가지 위계와 Signal, Critical 강조 표현을 지원합니다.
Link
Alpha-coded
다른 위치나 문서로 이동하는 destination action입니다. 현재 위치, 포커스, 외부 이동 의미를 버튼과 구분해 전달합니다.
External Link + Copy URL
Alpha-coded
외부 대상 링크 이동과 정확한 URL 복사를 두 개의 독립 행동으로 구성합니다.
Icon Button
Selection & Input
텍스트 입력, 선택, 모드 전환처럼 사용자가 값을 정하거나 바꾸는 컨트롤입니다.
Compound Field + Action
Alpha-coded
Select/Input과 독립 Action의 높이·Caret·Focus를 맞추는 재사용 가능한 계약입니다.
Text Field
Text Area
Checkbox
Radio
Switch
Select
Search Input
Tabs
Segmented Control
Segmented Control
Alpha-coded
Slider
Stepper / Number Input
Stepper / Number Input
Planned
Date / Time Input
Date / Time Input
Planned
File Upload
Chip / Tag Input
Chip / Tag Input
Alpha-coded
Feedback & Status
상태, 진행, 결과와 복구 가능성을 전달합니다. Tooltip처럼 필요할 때 정보를 드러내는 요소는 Disclosure & Overlay에서 다룹니다.
Inline Message
Inline Message
Alpha-coded
Banner
Status
Badge
Toast / Snackbar
Toast / Snackbar
Alpha-coded
Progress
Spinner
Skeleton
Empty State
Error State
Unavailable State
Unavailable State
Alpha-coded
Partial / Degraded State
Partial / Degraded State
Alpha-coded
Navigation
앱 안에서 현재 위치를 이해하고 다른 화면이나 단계로 이동하게 돕습니다.
Top Navigation
Alpha-coded
Identity, Primary navigation, Utilities를 재사용 가능한 한 헤더로 결합하는 반응형 Composition입니다.
Side Navigation
Bottom Navigation
Bottom Navigation
Planned
Breadcrumb
Pagination
Page Indicator
Step Navigation
Section Navigation
Section Navigation
Planned
Content & Data
목록, 표, 미디어처럼 정보를 읽고 비교하는 단위를 다룹니다. Data Grid는 실제 소비자 요구가 생길 때까지 Deferred입니다.
Metric / Stat
Alpha-coded
레이블이 있어야 의미를 해석할 수 있는 하나의 정량 값을 보여주는 기본 정보 단위입니다.
Copyable Value
Alpha-coded
ID와 Common Code의 정확한 원문을 복사하는 저강도 컨트롤입니다.
Avatar / Profile
List
List Row
List Header
Definition List / Key Value
Definition List / Key Value
Planned
Table
Data Grid
Image
Image Grid / Media
Image Grid / Media
Planned
Code / Terminal Surface
Code / Terminal Surface
Planned
Divider / Rule
Divider / Rule
Alpha-coded
Card
Disclosure & Overlay
추가 정보나 일시적인 작업 표면을 필요할 때 드러냅니다. Tooltip은 이 category가 canonical owner입니다.
Disclosure / Accordion
Disclosure / Accordion
Alpha-coded
Dialog / Popup
Dialog / Popup
Alpha-coded
Drawer / Bottom Sheet
Drawer / Bottom Sheet
Planned
Popover
Menu / Pulldown
Tooltip
AI & Agentic
AI의 상태, 근거, 승인, 도구, 산출물과 이어지는 작업을 구분해 보여줍니다. 모델 실행·도구 권한·저장·오케스트레이션은 제품이 소유합니다.
Runtime & Trust
Presence
Alpha-coded
User와 Agent의 관계, lifecycle과 motion을 한 쌍의 Presence로 보여주는 alpha-coded identity component입니다.
AI Content Label
AI Content Label
Alpha-coded
Source Citation
Source Citation
Alpha-coded
Evidence List
Uncertainty
Unsupported
Unknown
Review Required
Review Required
Alpha-coded
Human Approval Gate
Human Approval Gate
Alpha-coded
Prompt Composer
Prompt Composer
Alpha-coded
Context Attachment
Context Attachment
Planned
Context Chip
Conversation
Message
AI Response
Streaming Response
Streaming Response
Alpha-coded
Partial Result
Partial Result
Alpha-coded
Artifact Preview
Artifact Preview
Alpha-coded
Diff Review
Tool Invocation
Tool Invocation
Alpha-coded
Tool Result
Retry / Resume / Cancel
Retry / Resume / Cancel
Alpha-coded
Agent Action Timeline
Agent Action Timeline
Alpha-coded
Handoff
Queue