Button

Installation

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.

Progress and Status

Setting progress (0–100) renders a background fill and numeric readout; setting status to 'success', 'warning', or 'error' smoothly settles the fill into the semantic tone and draws the status glyph.

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

A copy draws a check and morphs the label into copiedLabel; a failure draws a cross and emits error. iconOnly shows the label only while reporting.

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.
• Prefer progress and status for measurable async tasks so progress and outcome resolve inside the same button without jarring external alerts.
• 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, and set failedLabel outside English.

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, loading, and an unfinished progress (< 100 with no status) all 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, progress, or status changes, and ease colour only inside the state-change window (.is-morphing); 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; it ignores clicks while copying and eases colour only on a state change.
• Under reduced motion, the vibrate shake is skipped and both TxButton status and TxCopyButton land each state as its final frame.

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).