Button
Tactile button system with flat variants
Button
Usage
Buttons trigger explicit actions. Keep a clear hierarchy in the interface:
- Keep a single primary button per view to avoid hierarchy conflicts
- Use
variantandsizeto convey action priority - Async actions should show
loadingto avoid repeated triggers
Variants
Appearance
Base visuals and semantic variants.
Disabled
Disabled states.
Loading
Show loading feedback during async actions.
Sizes
Buttons provide three sizes beyond the default, affecting density and tactile feel.
Block
Block buttons fill the container width for full-width primary actions.
Shapes
Adjust shapes with plain / round / circle / dashed.
Haptics
Haptic feedback for mobile interactions, with multiple intensity options.
API Specifications
Button Attributes
| Parameter | Type | Default | Description |
|---|---|---|---|
variant | primary secondary ghost danger success warning info flat bare | - | Visual variant |
type | primary success warning danger info text | - | Shortcut semantic type (legacy) |
size | sm md lg large small mini | 'md' | Button size |
block | boolean | false | Block-level (full width) |
plain | boolean | false | Plain style |
dashed | boolean | false | Dashed style |
round | boolean | false | Rounded style |
circle | boolean | false | Circular button |
loading | boolean | false | Loading state |
disabled | boolean | false | Disabled state |
icon | string | - | Icon class name |
autofocus | boolean | false | Autofocus |
native-type | button submit reset | 'button' | Native type attribute |
vibrate | boolean | true | Enable haptics |
vibrate-type | light medium heavy bit success warning error | 'light' | Haptic type |
Visual variant
Shortcut semantic type (legacy)
Button size
Block-level (full width)
Plain style
Dashed style
Rounded style
Circular button
Loading state
Disabled state
Icon class name
Autofocus
Native type attribute
Enable haptics
Haptic type
Button Events
| Parameter | Type | Default | Description |
|---|---|---|---|
click | (event: MouseEvent) => void | - | Triggered on click |
Triggered on click
Types
import type { TxButtonProps } from '@talex-touch/tuffex'
export interface ButtonProps extends TxButtonProps {}
Composition Notes
Split Button
A combined button for "primary action + more actions" (e.g., RUN + …).
Primary + Ghost
Pair primary with ghost for clear hierarchy.
Design Principles
- Keep a single primary button to avoid hierarchy conflicts.
- Keep
variantconsistent within similar actions. - Async actions must use
loadingto avoid duplicate triggers. - Prefer
vibrateon mobile to enhance tactile feedback.
Design Notes
- Emphasize press feedback with smooth rebound.
- Translucent surfaces need proper background contrast.
- Keep icon/text spacing consistent to avoid visual drift.