Button

Button 渲染带 Liquid Glass 表面的原生按钮，支持可选的前后图标与五种尺寸。它用于触发操作；需要导航时，可将其渲染为链接。

基础示例复制锚点链接

下面的计数器直接渲染真实 Button。点击按钮会更新 React 状态，重置按钮在计数为零时自动禁用。

尺寸复制锚点链接

支持 xs / sm / md / lg / xl，默认 md。文字和图标会随尺寸缩放，不需要给图标单独传 size。

图标复制锚点链接

前置图标位于文字左侧，后置图标位于文字右侧。两个图标使用相同的普通容器。纯图标按钮需要提供 aria-label；没有文字时不会渲染空的 label 插槽，图标会保持居中。

状态复制锚点链接

禁用状态使用原生 disabled，键盘与指针交互都会停止。focusableWhenDisabled 会让按钮在禁用时仍保留在 Tab 顺序中，组件通过 aria-disabled 表达禁用状态并阻止激活，适合需要提示原因的禁用操作。

全宽按钮复制锚点链接

className 调整外层点击区域，内部的 base 布局会自动填满可用宽度：

渲染为链接复制锚点链接

需要导航而不是触发操作时，可以传入 nativeButton={false} 并渲染链接，而不是原生 <button>：

表单外的按钮复制锚点链接

form 可以把按钮关联到文档中其他位置的表单。当多个按钮提交同一个表单时，name 与 value 用来区分用户选择了哪个操作。

无障碍复制锚点链接

Button 默认渲染原生 <button>，因此焦点、Enter 与 Space 激活以及禁用行为都由平台提供。label 或 children 提供可访问名称。纯图标按钮必须使用 aria-label 或 aria-labelledby；图标插槽是装饰性的，对辅助技术隐藏。

使用 nativeButton={false} 渲染链接或其他元素时，请保持可见标签有意义，并选择与操作语义匹配的元素。focusableWhenDisabled 会让禁用的操作保留在 Tab 顺序中，通过 aria-disabled 暴露状态，同时阻止激活。

API 参考复制锚点链接

主题复制锚点链接

组件使用共享玻璃材质。可以在父级调整 --ui-glass-* token，用 className 控制布局，并通过 ui 按 data-slot 调整内部槽位。组件级数值位于 src/theme/button.ts。Token 分层与预设见主题指南。

相关组件复制锚点链接

• Toggle — 需要保持按下状态的操作。
• Toggle Group — 一组相关的按下状态。
• Input — 与操作并排的文本输入。