Blackwork

Button

用于提交、确认等操作，支持多种样式、尺寸和加载状态。

Button

Button 用于触发操作。普通页面跳转保留为链接；只有链接需要按钮外观时才使用 asChild。

适用场景

  • 提交表单、确认对话框、开始一项任务
  • 工具栏里的图标按钮（size="icon"）
  • 看起来像按钮的链接（asChild）

普通文字导航使用链接即可。variant="link" 适合保留按钮行为、以文字链接样式显示的操作。

用法

用法

示例

变体

一组操作中的主要操作使用 default，辅助操作使用 secondary 或 outline，具有破坏性后果的操作使用 destructive。紧凑工具栏可使用 ghost，避免持续显示边框。

变体

尺寸

尺寸

加载

loading 会禁用按钮并显示加载图标，适合保存或提交期间使用。保持按钮文案不变，避免宽度和操作名称在提交时改变。loading 不能与 asChild 同时使用。

加载

asChild

asChild 将按钮样式和属性传给子节点，例如 Link。子组件需要接收并传递这些属性。

asChild

Get started

API 参考

属性类型默认值说明
variant"default" | "secondary" | "outline" | "ghost" | "destructive" | "link""default"按钮的视觉样式。
size"default" | "sm" | "lg" | "icon""default"控制高度和内边距。纯图标按钮使用 icon。
loadingbooleanfalse禁用按钮并显示加载图标。
loaderClassNamestring—加载图标的额外类名。
asChildbooleanfalse将 props 合并到子节点，不再渲染 button。不要和 loading 一起使用。
disabledbooleanfalse原生禁用状态。

说明

  • 优先通过 variant 选择样式，保持按钮颜色一致。
  • 图标和文案之间默认使用 gap-2；纯图标按钮会自动取消间距。
  • size="icon" 渲染正方形按钮。纯图标按钮需要无障碍名称，例如 aria-label="搜索"。
  • 表单里的提交按钮请显式写 type="submit"。

玻璃外观

控件位于图片或半透明表面上时使用 glass，同组的主要操作使用 glass-primary。接入方式和对比度要求见 液态玻璃。