Button 按钮

安装

pnpm add @talex-touch/tuffex

import { TxButton, TxSplitButton, TxIconButton, TxCopyButton } from '@talex-touch/tuffex/button'
import '@talex-touch/tuffex/button/style.css'
import '@talex-touch/tuffex/base.css' // 设计令牌与重置样式，全应用引入一次

用法

变体

禁用

加载中

loading 期间按钮禁用；纯图标按钮的加载指示叠在图标上。

尺寸

size 有 sm、md、lg 三档，高度为 26、32、38px。

块级

block 撑满容器宽度；搭配 loadingVariant="bar" 时加载显示为扫光层。

形态

非块级 circle 的边长等于按钮高度；flat 变体的 sm 为 32px。

触感反馈

vibrate 需显式开启：点击时触发设备震动，并按强度轻晃按钮；不支持震动的设备也会晃动。

分割按钮

TxSplitButton 把主操作与 menu 插槽中的更多操作组合在一起。

主次搭配

主操作用 primary，次操作用 ghost。

图标按钮

label 提供可访问名称，pressed 表示持久切换态，status 设置语义色。

复制按钮

成功后显示 copiedLabel，失败时派发 error。

最佳实践

• 每个视图或卡片只放一个主按钮，次要动作用 ghost 或 secondary。
• 异步动作设置 loading，成功与失败路径都要撤下，避免按钮卡在禁用态。
• 只在表单内使用 nativeType="submit"；默认的 button 不会意外提交表单。
• 纯图标动作用 TxIconButton 并设置 label；pressed 只用于持久开关。
• TxCopyButton 的 copyLabel 写明复制对象；复制值关键时处理 error，浏览器可能拒绝非用户手势的写入。

API 参考

TxButton

属性

事件

插槽

TxSplitButton

属性

事件

插槽

TxIconButton

属性

事件

插槽

TxCopyButton

属性

事件

插槽

类型

import type { TxButtonEmits, TxButtonProps, TxIconButtonProps, TxSplitButtonEmits, TxSplitButtonProps } from '@talex-touch/tuffex'

export interface ButtonProps extends TxButtonProps {}
export interface ButtonEmits extends TxButtonEmits {}
export interface SplitButtonProps extends TxSplitButtonProps {}
export interface SplitButtonEmits extends TxSplitButtonEmits {}
export interface IconButtonProps extends TxIconButtonProps {}

概述

• variant 优先于 type；两者都未设置时为 secondary。
• disabled 与 loading 都禁用原生 <button> 并阻止 click；TxSplitButton 加载时两侧都禁用。
• 非块级、非圆形按钮在 loading 切换时以 FLIP 过渡宽度；block 与 circle 并用时保持常规文案布局。
• 纯图标的 TxButton 用 aria-label 等 attrs 命名；TxIconButton 把 label 写入 aria-label，布尔 pressed 写入 aria-pressed。
• TxCopyButton 优先用 Clipboard API，不可用时回退到 execCommand；禁用或写入中忽略点击。
• 减少动态效果时跳过 vibrate 的晃动。

技术实现

• --tx-button-height 同时决定按钮高度与非块级圆形按钮的宽度。
• 源码：packages/tuffex/packages/components/src/button/。

使用场景

• 页面与卡片动作、表单提交（nativeType="submit"）、抽屉底部操作（block）。
• 表格行与工具栏（size="sm"）、纯图标操作（circle 或 TxIconButton）。
• 带一组变体的主操作（TxSplitButton）、复制到剪贴板（TxCopyButton）。