UI Components
界面组件(UI Components)是产品界面的基础构件。每个组件都应有清晰语义、状态、焦点行为、布局规则和可访问性约束。
动作组件
Button 是主要动作触发器,需要 default、hover、active、focus、disabled 和 loading 状态。CTA 文案应直接命名动作。同一视图中的 primary action 需要保持唯一主导地位。
输入组件
Input、Textarea、Select、Checkbox、Radio Group、Switch、Slider 和 Combobox 都是输入组件。它们需要持久 label、清晰状态、键盘支持和 label association。Switch 暗示即时生效;Radio Group 表示一组互斥选项。
浮层组件
Modal / Dialog 会打断当前流程,需要 focus trap 和背景 inert。Sheet、Drawer、Popover、Tooltip 都是浮层变体:Popover 可承载交互内容,Tooltip 只承担短解释。
导航组件
Navigation Menu、Sidebar、Breadcrumb、Tabs、Accordion、Stepper、Carousel 和 Pagination 负责移动、分组或分步。Tabs 适合同一空间中的相关视图;Breadcrumb 适合层级深处的返回路径。
反馈组件
Toast、Progress、Skeleton、Spinner、Empty State 和 Error State 说明系统状态。Skeleton 能在内容加载前保留形状;Spinner 适合短时动作等待。Empty State 应解释原因并给出第一动作。
数据与内容组件
Card、Avatar、Badge、Tag、Data Table、Separator 等组件组织内容和状态。Data Table 中数字应右对齐并使用 tabular nums;Badge 依附于对象,Tag 通常可独立选择或移除。