Button

Installation

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' // tokens + resets, once per app

Usage

Variants

Disabled

Loading

The button is disabled while loading; on icon-only buttons the indicator sits over the icon.

Sizes

size has three tiers, sm, md, and lg, at 26, 32, and 38px tall.

Block

block fills the container width; with loadingVariant="bar", loading shows as a sweep layer.

Shapes

A non-block circle is as wide as the button is tall; the flat variant's sm is 32px.

Haptics

vibrate is opt-in: a click vibrates the device and nudges the button by strength; the nudge shows even without vibration support.

Split Button

TxSplitButton pairs a primary action with more actions in the menu slot.

Primary + Ghost

Use primary for the main action and ghost for the secondary one.

Icon Button

label supplies the accessible name, pressed a persistent toggle state, and status a semantic tone.

Copy Button

Shows copiedLabel after a successful copy and emits error on failure.

Best Practices

• Keep one primary button per view or card; use ghost or secondary for lower-priority actions.
• Set loading for async actions and clear it on both success and failure, so the button never sticks disabled.
• Use nativeType="submit" only inside forms; the default button never submits by accident.
• Use TxIconButton with a label for icon-only actions; reserve pressed for persistent toggles.
• Name the copied target in TxCopyButton's copyLabel; handle error for critical values, since browsers can reject writes outside a user gesture.

API Reference

TxButton

Props

Events

Slots

TxSplitButton

Props

Events

Slots

TxIconButton

Props

Events

Slots

TxCopyButton

Props

Events

Slots

Types

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 {}

Overview

• variant wins over type; with neither set, the button is secondary.
• disabled and loading both disable the native <button> and suppress click; a loading TxSplitButton disables both sides.
• Non-block, non-circle buttons animate width with a FLIP transition when loading toggles; block with circle keeps the regular label layout.
• An icon-only TxButton takes its name from attrs such as aria-label; TxIconButton maps label to aria-label and a boolean pressed to aria-pressed.
• TxCopyButton uses the Clipboard API and falls back to execCommand when it is unavailable; it ignores clicks while disabled or copying.
• Under reduced motion, the vibrate shake is skipped.

Technologies

• --tx-button-height sets both the button height and the width of a non-block circle.
• Source: packages/tuffex/packages/components/src/button/.

Use cases

• Page and card actions, form submits (nativeType="submit"), and drawer footers (block).
• Table rows and toolbars (size="sm"), and icon-only actions (circle or TxIconButton).
• A primary action with a menu of variants (TxSplitButton), and copy-to-clipboard (TxCopyButton).