组件 · 通用

Button 动作按钮

用于查询、保存、提交等动作；loading 只描述外部受控忙碌状态，阻止再次激活并保留动作名称与焦点。页面跳转应使用链接语义，不要把按钮当正文链接。

何时使用

• 用于提交表单、保存、删除等需要用户明确触发的即时动作。
• 同一区域只放一个 solid 主操作，其余用 outline / ghost 降低层级。
• 页面跳转使用链接语义；可用 buttonVariants() 为原生链接提供按钮外观。

颜色、展示方式、尺寸彼此独立。激活、禁用与 loading 拦截由 Headless Button 承担，UI 提供主题外观与忙碌图标。 loading 由调用方受控。未提供 size 时读取最近的 ConfigProvider.size，无配置时使用 md；显式 size 优先。

引入

从 @selrux/ui/button 引入 Button。组件样式随入口自动引入，无需额外导入全量样式。 需要统一尺寸、语言或主题时，使用 @selrux/ui/config-provider 的 ConfigProvider；基础按钮不要求额外 provider。

演练场

调节语义色、展示方式、尺寸与加载等属性，实时预览真实 Button。

代码演示

API

(props: ButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactNode

"primary" | "destructive" | "success" | "warning" | "info" | "carbon" | "secondary" | "accent"

ButtonProps

"xs" | "sm" | "md" | "lg" | "xl" | "2xl"

"link" | "solid" | "outline" | "ghost"

ButtonVariantOptions

• loading 阻止再次激活并保留焦点；loading 的 submit 按钮不会再次提交表单。
• disabled 使用原生禁用语义。只有一个元素子节点时按纯图标按钮处理。
• 不支持旧属性 appearance、beforeClick、autoLoading、asChild，也不支持 variant="dashed"、variant="default"、size="default"、size="icon"。
• 当前状态为 preview；部分默认前景组合不承诺 4.5:1 对比度。调用方仍需检查实际主题。

事件

onClick 在激活时触发，loading 或 disabled 时由 Headless 拦截。其余原生事件 onFocus、onBlur、onKeyDown 等透传到实际 button。

buttonVariants

纯样式函数组合基础类、语义色、展示方式、尺寸与附加类，不读取 ConfigProvider，不处理事件。className 追加在末尾，不做冲突合并。

组合基础类、语义色、变体、尺寸和可选附加类。

(options?: ButtonVariantOptions) => string

123456import { buttonVariants } from '@selrux/ui/button';

/** 保留原生链接语义，仅复用 Button 视觉类。 */
export function LinkButtonExample() {
  return <a href="/docs" className={buttonVariants({ size: 'lg', variant: 'outline', className: 'extra' })}>阅读文档</a>;
}

无障碍

• 渲染原生 button，支持 Tab 聚焦、Enter / Space 激活。
• loading 保留动作名称与焦点；忙碌辅助说明来自 loadingLabel 或当前语言包。
• 忙碌图标带 aria-hidden="true"，避免读屏重复朗读；纯图标按钮必须提供 aria-label。
• 焦点环使用 --srx-focus-ring / --srx-focus-width Token，不能用全局样式移除。

相关组件

关联 ButtonGroup、ConfigProvider 与 Icon。主题编辑器和演练场可用于验证真实主题与组件组合。

• ButtonGroup 按钮组
• ConfigProvider 全局配置
• Icon 图标
• 主题编辑器
• 演练场

文档快照：edbed4e3949112ae4797ba611a523984