参考
组件
115 个基础组件，按“它们做什么”分组，而不是按“它们由什么构成”。每一个都针对 token 层书写，所以没有一个自带颜色。
动作
2Button - 按钮
系统的动作，和它旁边那个输入框用同一个圆角。
FloatingIconButton - 浮动图标按钮
钉在屏幕角落的圆形动作。
表单
14Checkbox - 复选框
一个在表单提交时才生效的选择。
ColorPicker - 取色器
一个颜色，选出来的，或者打出来的。
Combobox - 可搜索选择器
一个能打字的 select，可以选一个，也可以选多个。
DatePicker - 日期选择器
一个日期——或者一段日期——从日历里选。
Field - 表单项
一行带标签的表单：标签、控件，和下面那一条消息——在 row 布局下，它就是那一行设置项。
Input - 输入框
一行文本输入。
NativeSelect - 原生选择器
平台自己的选择器，能改的地方改了。
NumberField - 数字输入框
一个数字，打出来的，或者扫出来的。
RadioGroup - 单选组
一组互斥的选项。
Select - 选择器
从一个列表里选一项，从头到尾都由我们绘制。
Slider - 滑块
在一段范围里选一个值。
Switch - 开关
一个立刻生效的设置。
Textarea - 多行输入
多行文本输入，只能纵向拉伸。
ToggleGroup - 分段控件
分段控件：若干选项，一条。
导航
7Accordion - 手风琴
就地展开的折叠行。
Breadcrumb - 面包屑
你在哪，画成一条路径。
Collapsible - 折叠面板
一个自己开合的东西。
NavItem - 导航项
侧边栏里的一行。
Pagination - 分页
带页码的分页，中间省略。
Sidebar - 侧边栏
一条贴着应用侧边的导航栏。
Tabs - 标签页
一条，若干面板。
浮层
8Command - 命令面板
可筛选的动作列表——⌘K 那个面。
ContextMenu - 右键菜单
右键打开的菜单。
Dialog - 对话框
一个模态表面：portal、遮罩、居中面板。
DropdownMenu - 下拉菜单
一组动作构成的菜单。
Popover - 气泡卡片
锚在控件上的面板，里面装可以交互的内容。
SearchableMenu - 可搜索菜单
一个能打字筛选的动作菜单。
Sheet - 抽屉
停靠在视口某一边的面板。
Tooltip - 文字提示
悬停和获得焦点时出现的一句短标签。
反馈
7Alert - 提示条
关于这个页面的一条消息，就地显示。
EmptyState - 空状态
一个还什么都没有的集合。
ErrorState - 错误状态
一个没能显示出来的页面。
Progress - 进度条
一条会填充的进度条；终点未知时它来回扫。
Skeleton - 骨架屏
页面到来之前，页面的形状。
Spinner - 加载环
系统唯一的“正在处理”指示——一个环，永远不是流光。
Toast - 轻提示
一次性的确认，在应用根部挂一次。
展示
17Avatar - 头像
一个人，画成一个圆；图片没到之前先显示缩写。
Badge - 徽章
一个计数或一种状态，用等宽字，所以它读起来像元数据。
Code - 行内代码
句子里的一个函数名，或者一个 flag。
CodeBlock - 代码块
一段多行片段，摆在 plate 上，并配一条把它带走的路。
Diagram - 示意图
一张流程图或架构图，用系统自己的零件画出来。
FigureBand - 数字带
一排被数出来的事实，只用细线分隔，此外什么都没有。
Heading - 标题
一个标题，元素和字号是两个各自独立的决定。
Kbd - 按键
键盘上的一个键，就按键来排版。
LinkArrow - 链接箭头
标记“这条链接会离开本页”的记号。
Markdown - Markdown 渲染
一段 Markdown 字符串，用这套系统的组件渲染出来。
Separator - 分隔线
一条线，三种粗细——单色页面需要它们；断口本身有话要说时，还能往里放字。
StatusDot - 状态点
状态词旁边的那个点。
StatusPill - 状态胶囊
一种活着的状态：一个点，加一行大写等宽标签。
Steps - 步骤条
一串带编号的步骤，画成一条轨——一件接一件，中间有条线穿过去。
Tag - 标签
主题标签——一个话题、一项技术、一个筛选面——用 onClick 做筛选，用 onRemove 关掉。
Text - 文本
这套系统的段落，落在墨色阶的第二级。
Timestamp - 时间戳
一个日期或一个时间，按这套系统渲染它们的唯一方式渲染。
容器
9AppShell - 应用外壳
桌面上两栏，手机上一栏加抽屉。
Article - 长文
长文阅读面——Markdown 能产出的一切，都套上这套系统的字体、颜色和线。
AspectRatio - 宽高比
一个盒子，不管里面装什么都保持形状。
Calendar - 日历
一个月，画成一格一格的天。
Card - 卡片
一块有边界的表面，下面没有阴影。
DescriptionList - 描述列表
一条记录的各个字段，用真正的 <dl>，不是一堆 div 拼的网格。
PageHeader - 页面开头
一个页面的开头：这一页是什么，以及什么在限定它。
ScrollArea - 滚动区域
一个会滚动的盒子，滚动条在哪都长一样。
Toolbar - 工具栏
贴在工作区边缘的那条动作栏。
数据
8BarList - 排行榜
一个排行榜——条形在名字后面，而不是旁边。
BigNumber - 大数字
一个数字，用标题的字号。
BulletChart - 子弹图
一个度量、它的目标，以及说明这个数好不好的几条背景带。
CalendarHeatmap - 日历热力图
一年的每日读数，画成一周一列的网格。
Heatmap - 热力图
一格一格按轻重去读的值。
Metric - 读数板
一条读数，摆在一块小板上：一个标签、一个数字，以及限定它的那句话。
Sparkline - 迷你折线
一个词那么大的一串数字。
Table - 表格
一张数据表——对齐、排序、边框都可以按列配置。
图表
15AreaChart - 面积图
连续轴上的一条填充序列，面积本身是有意义的。
BarChart - 柱状图
按长度比较的离散分类。
BoxPlot - 箱线图
一个度量在各个分类上的分布范围。
ComposedChart - 组合图
同一根轴上的柱与线——体量，以及它变化的速度。
Facet - 小型多图
同一张图按分组各画一遍，共用同一把尺。
FunnelChart - 漏斗图
只会越来越窄的若干阶段。
Histogram - 直方图
一个分布长什么形状。
LineChart - 折线图
连续轴上互相比较的多条序列。
PieChart - 饼图
一个整体的若干部分。
RadarChart - 雷达图
若干个具名维度上的一张侧写。
RadialChart - 径向图
弧上的值——一个仪表，或几个共用一把刻度的总量。
SankeyChart - 桑基图
一个量在流经各个阶段时去了哪里。
ScatterChart - 散点图
两个度量互相对照，每个观测一个点。
TreemapChart - 矩形树图
整体的组成部分——当部分多到饼图撑不住、而且还会嵌套时。
WaterfallChart - 瀑布图
一个总数是怎么从一个数走到另一个数的。
图示
11ArchitectureFigure - 架构图
一张组件地图：服务、数据存储、信任边界，以及谁在跟谁说话。
DataflowFigure - 数据流图
一条管线：数据从哪来、经过了什么、最后落到谁手里。
DiagramCanvas - 图画布
一个能让比它更大的画在里面平移和缩放的框。
DiagramExportMenu - 导出菜单
把图带走：PNG、JPEG、WebP、SVG，以及 1200×630 的分享卡。
DiagramInspector - 检查面板
读者刚刚选中的东西，写在图旁边。
DiagramLegend - 图例
钥匙：哪一种画法代表哪一类东西。
DiagramMinimap - 缩略图
在一个比窗口更大的东西里，你现在在哪。
DiagramToolbar - 图工具条
一排属于它下面那个界面的动作。
LifecycleFigure - 生命周期图
一台状态机：一个东西可能处于什么状态，以及什么让它在状态之间移动。
SequenceFigure - 时序图
一条随时间展开的调用链：谁问谁、按什么顺序、又回来了什么。
WorkflowFigure - 流程图
按泳道和阶段排的流程，主路径画得比它的分支重。
网站
17Actions - 页面操作
分享操作菜单与返回顶部控件。
Collection - 内容集合
集合标题、搜索控件、精选条目与空状态。
Contact - 联系页面
留言表单、联系资料、常见问题与位置图片。
Content - 内容排版
格式化代码、剪贴板操作、步骤序列与富文本元素。
Conversation - 对话界面
对话记录、回答、引用、输入区与悬浮聊天界面。
Evidence - 证据展示
可展开的活动记录、来源阶段、评分与耗时摘要。
Media - 影像集合
照片集合、灯箱、图片详情与地图控件。
Metrics - 指标展示
指标面板、无障碍数据表格与图表布局。
Music - 音乐展示
精选录音、曲目行与播放列表集合。
Portfolio - 作品介绍
编辑式个人介绍、精选图片、内容条目与提问卡片。
PortfolioIndex - 作品索引
带有辅助内容栏的标签式内容集合。
Reading - 阅读页面
文章与项目布局、目录、媒体和安装说明。
Recovery - 恢复状态
加载中、内容不可用和页面缺失状态，以及相应的恢复操作。
SearchPalette - 搜索面板
在一个无障碍弹窗内展示搜索结果、操作和详情。
SiteNavigation - 网站导航
响应式导航，以及明确的语言和外观选项。
SiteShell - 页面框架
页面地标、页脚导航分组与共用章节标题。
Timeline - 时间线
职业经历、个人介绍与按时间排列的条目。