UI 组件类型 · 单一组件 / Button
Button
触发动作、提交选择或打开流程。
Identity · 身份
- 子类型
- 单一组件
- 父级类目
- 操作与控件
What · 是什么
- 组成与状态
- Container、Label、Leading Icon、Trailing Icon、Loading Indicator。
Why · 为什么
- 作用
- 触发动作、提交选择或打开流程。
Where · 在哪里
- 适用场景
- Web 界面设计、Default、Hover、Focused、Active、Pressed、Disabled、Destructive、Loading、Busy、Primary、Secondary、Tertiary、Quiet、Emphasized、Outline、Filled、Ghost、Small、Medium、Large、Compact
Lifecycle · 生命周期
- 状态
- 启用
所属组件分类、组件部件与横向适用关系
关系来自本地关系表,并包含反向关联。
- AI Prompt / ResponseAI Prompt / Response反向 · 应用于
让用户提交自然语言任务并理解生成结果、来源、限制和继续操作。
- Announcement / Site AlertAnnouncement / Site Alert反向 · 应用于
在页面顶部或关键上下文中告知维护、政策、活动或高优先级变化。
- API / Code ExampleAPI / Code Example反向 · 应用于
用请求、参数、代码和结果说明 API 或技术能力如何被正确使用。
- Before / After ShowcaseBefore / After Showcase反向 · 应用于
对比变化前后的视觉或结果,帮助用户理解产品、服务或过程价值。
- Chat / ConversationChat / Conversation反向 · 应用于
围绕实时或异步消息组织对话、参与者、上下文和输入动作。
- Checkout / Order SummaryCheckout / Order Summary反向 · 应用于
总结商品、价格、地址、支付和风险信息,支持用户完成交易。
- Comments / DiscussionComments / Discussion反向 · 应用于
允许用户在内容对象下阅读、发表和回复讨论,并处理审核和空状态。
- Comparison TableComparison Table反向 · 应用于
按维度对比产品、方案、服务或决策选项,帮助用户减少记忆和来回跳转。
- Contact & SupportContact & Support反向 · 应用于
让用户提出问题、请求支持或找到合适的联系渠道。
- Cookie / Privacy ConsentCookie / Privacy Consent反向 · 应用于
解释 Cookie、追踪和隐私选择,并让用户能接受、拒绝或细化设置。
- Cookie Preference CenterCookie Preference Center反向 · 应用于
让用户查看、分组和修改非必要 Cookie、追踪或隐私权限。
- CTA BandCTA Band反向 · 应用于
在页面节点提供清晰的下一步行动、利益说明和低摩擦入口。
- Demo RequestDemo Request反向 · 应用于
收集最少需求并预约产品、服务或销售演示。
- Donation / FundraisingDonation / Fundraising反向 · 应用于
说明目标、进展和资金用途,并提供低摩擦的捐赠或支持入口。
- Event RegistrationEvent Registration反向 · 应用于
提供活动信息、报名字段、名额、费用和确认提醒。
- Form Success / Next StepsForm Success / Next Steps反向 · 应用于
在表单或任务提交后确认结果、解释后续处理并提供下一步入口。
- HeroHero反向 · 应用于
用一句核心承诺、支持说明和主要行动让用户快速判断页面价值。
- Interactive CalculatorInteractive Calculator反向 · 应用于
让用户输入假设并即时获得可解释的估算、比较或结果。
- Lead CaptureLead Capture反向 · 应用于
收集完成转化所需的最少信息,并提供明确的价值交换和提交反馈。
- Login / AuthLogin / Auth反向 · 应用于
提供登录、注册、身份恢复或切换账户的入口与恢复路径。
- Media / Product DemoMedia / Product Demo反向 · 应用于
用视频、动图或交互预览解释产品如何工作及其关键体验。
- Newsletter SignupNewsletter Signup反向 · 应用于
以低承诺方式收集邮箱并持续提供内容、产品或活动更新。
- Pagination / Load MorePagination / Load More反向 · 应用于
将较大的结果集合拆分成可控制的批次,并让用户继续浏览。
- Pricing ComparisonPricing Comparison反向 · 应用于
把方案、价格、权益、限制和选择动作放在同一比较结构中。
- Product / Plan CardsProduct / Plan Cards反向 · 应用于
用可扫描的方案或产品卡片呈现价格、权益、限制和主要动作。
- Product ConfiguratorProduct Configurator反向 · 应用于
按选项、约束和价格反馈组合或定制一个产品、方案或服务。
- Resource / DownloadResource / Download反向 · 应用于
提供可下载、可保存或可继续阅读的资源,并说明格式、价值和限制。
- Save / ExportSave / Export反向 · 应用于
让用户保存、下载、复制、导出或分享当前结果与内容。
- Share / InviteShare / Invite反向 · 应用于
让用户把页面、结果、资源或邀请以适合目标渠道的方式分享出去。
- Survey / FeedbackSurvey / Feedback反向 · 应用于
以问卷、评分或开放反馈收集用户意见,并说明提交后的处理方式。
- Tool InputTool Input反向 · 应用于
让用户输入、配置或上传工具任务所需的信息。
- Tool ResultTool Result反向 · 应用于
呈现工具计算、转换、生成或分析后的结果、解释和下一步动作。
- Video DemoVideo Demo反向 · 应用于
用短视频展示产品、服务或操作流程,并提供字幕、摘要和替代路径。
- Waitlist / PrelaunchWaitlist / Prelaunch反向 · 应用于
在产品或活动尚未开放时收集兴趣、说明预期并提供状态更新。
- Web 界面设计Web Interface Design应用于
围绕浏览器环境组织页面架构、导航、内容、区块、组件、转化和性能的界面设计领域。
- 操作与控件Actions & Controls属于
用于触发操作、执行命令、提交动作和切换控制的组件。
- LabelLabel反向 · 属于
按钮的主要可读文本
- Leading IconLeading Icon反向 · 属于
按钮前置的图标插槽
- Loading IndicatorLoading Indicator反向 · 属于
提交中或处理中显示的加载提示
- Shortcut HintShortcut Hint反向 · 属于
提示可用键盘快捷键的辅助内容
- Trailing IconTrailing Icon反向 · 属于
按钮后置的图标插槽
- ActiveActive应用于
组件正在被按下或触发的瞬时状态。
- BusyBusy应用于
组件正在处理任务,暂时不应接受重复操作的状态。
- CompactCompact应用于
减少间距以适配高密度工作台的变体。
- DefaultDefault应用于
默认状态,组件可被使用但没有额外交互反馈。
- DestructiveDestructive应用于
操作可能删除、覆盖或造成不可逆影响的强调变体。
- DisabledDisabled应用于
组件暂时不可操作的状态。
- EmphasizedEmphasized应用于
在局部上下文中增强视觉强调的变体。
- FilledFilled应用于
以实色表面表达层级和可操作性的变体。
- FocusedFocused应用于
键盘或其他输入方式当前定位到组件的状态。
- GhostGhost应用于
无持续边框或填充、依靠交互反馈表达的变体。
- HoverHover应用于
指针悬停在可交互目标上的状态。
- LargeLarge应用于
适合主要任务、触屏和强调场景的大尺寸变体。
- LoadingLoading应用于
组件正在等待异步结果的状态。
- MediumMedium应用于
适用于大多数场景的默认尺寸变体。
- OutlineOutline应用于
以边框为主要容器或操作提示的变体。
- PressedPressed应用于
切换型或命令型控件保持按下语义的状态。
- PrimaryPrimary应用于
承担上下文中最重要任务的主要视觉变体。
- QuietQuiet应用于
减少装饰以融入内容背景的低干扰变体。
- SecondarySecondary应用于
承担次要但仍重要任务的视觉变体。
- SmallSmall应用于
适合紧凑空间和高密度任务的小尺寸变体。
- TertiaryTertiary应用于
低强调、补充性或内联操作的视觉变体。
- Button / CTAButton & Call to Action反向 · 应用于
触发操作、提交或导航的高优先级交互组件。
- Export ButtonExport Button反向 · 应用于
触发下载、复制或生成文件的明确操作组件。