MotionButton

Installation

import { TxMotionButton } from '@talex-touch/tuffex/motion-button'
import '@talex-touch/tuffex/base.css'
import '@talex-touch/tuffex/motion-button/style.css'

Usage

All interactions and source combinations

Filter any of the 13 interactions, inspect all 35 icon pairs, and switch between grid, list and icon-matrix layouts. Each specimen supports pointer hover, keyboard focus, native activation and decorative replay. Selected state and activation counts live only in the demo's local state; the copy specimen writes to the real clipboard.

Caller-owned operations and content

sourceId selects visual parameters, not an operation or a default label. A hover may reveal a check icon without claiming an operation succeeded. Only caller-owned selected enables activeLabel.

<script setup lang="ts">
import { ref } from 'vue'
import { TxMotionButton } from '@talex-touch/tuffex/motion-button'

const copied = ref(false)
const busy = ref(false)
const error = ref('')
const marked = ref(false)
async function copyHash() {
  busy.value = true
  error.value = ''
  try {
    await navigator.clipboard.writeText('43c29ce9cdd16459e3eab4992381b8d35b38776a')
    copied.value = true
  }
  catch {
    error.value = 'Clipboard access failed'
  }
  finally {
    busy.value = false
  }
}
</script>

<template>
  <TxMotionButton source-id="4" label="Copy hash" active-label="Copied"
    :selected="copied" :disabled="busy" @click="copyHash" />
  <p role="status">{{ error }}</p>
  <TxMotionButton variant="sparkle" label="Mark local item" :selected="marked" @click="marked = !marked">
    <template #icon><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 6h16M4 12h16M4 18h16" /></svg></template>
    <template #active-icon><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M20 6 9 17l-5-5" /></svg></template>
    <template #default="{ selected }">{{ selected ? 'Local item marked' : 'Mark local item' }}</template>
  </TxMotionButton>
</template>

The application owns its real operations and glyph content. Content slots are labels and decoration; place independent interactive controls outside the button.

Focus-blur links

Source 35 renders a group of real anchors or buttons. There is no button wrapping other interactive elements, and the component creates no placeholder destinations.

<script setup lang="ts">
import { ref } from 'vue'
import { TxMotionButton } from '@talex-touch/tuffex/motion-button'
const lastLabel = ref('')
</script>

<template>
  <TxMotionButton source-id="35" label="Project links" :items="[
    { label: 'Repository', href: 'https://github.com/TalexDreamSoul/talex-touch' },
    { label: 'Documentation', href: '/docs' },
    { label: 'Local action' },
  ]" @select="item => lastLabel = item.label" />
  <output>{{ lastLabel }}</output>
</template>

Best Practices

• Provide a meaningful label, default slot or ariaLabel. Icon-only controls still need an accessible name.
• Run the real operation in @click or @select. Set selected and activeLabel only from your own state; neither hover nor replay emits success or changes that state.
• Use href for navigation and type="submit" for form submission. Buttons retain native Enter/Space activation; anchors retain native Enter activation and modifier-click navigation.
• Set disabled while an operation must not run. A disabled link loses its destination and tab stop, rather than leaving a decorative overlay to intercept clicks.
• Prefer sourceId for original combinations; override variant, icons and colors when your content needs different parameters. Use slots for your own glyphs.
• Keep focus-blur #item content non-interactive: the owning anchor or button already handles focus and activation.
• Turn off animated to keep content and endpoint states without decorative work. Reduced motion, hidden documents, offscreen controls and deactivated KeepAlive trees suspend animation automatically.

API Reference

Props

Native attributes such as id, name, value, form, download, aria-expanded and aria-controls pass through to the owning element. Focus-blur attributes apply to its group.

Events

Slots

Exposed Methods

CSS Variables

Types

Exports include MotionButtonProps, MotionButtonEmits, MotionButtonInstance, MotionButtonItem, MotionButtonSize, MotionButtonVariant, MotionButtonSourceId, MotionButtonCatalogEntry and TxMotionButtonInstance. MotionButton is installable; TxMotionButton is the Vue component. MOTION_BUTTON_VARIANTS, MOTION_BUTTON_SOURCE_IDS, MOTION_BUTTON_CATALOG and MOTION_BUTTON_PRESETS expose the actual enumerations and source metadata.

Overview

• Explicit variant, icons, colors and holdDuration override sourceId. Source metadata labels are attribution only and never become implicit application copy.
• Hover, focus, pointer press and replay drive decoration. selected holds a target icon and enables activeLabel; it remains caller-owned. The original hover-based “Copied” business claim is intentionally not ported.
• Decoration uses pointer-inert content/layers. Normal controls remain native buttons/anchors, and focus-blur items remain individual native controls with visible keyboard outlines. Disabled anchors have no href, no tab stop and no emitted activation.
• Native form submission/reset and link navigation are not replaced by JavaScript keyboard emulation. Enter/Space pressed decoration follows the native element's supported keys.
• One shared activity gate stops CSS loops, pending replay frames, retention/replay timers, magnetic RAF work and icon/text morph work when inactive. SSR touches no browser APIs. Reduced motion keeps readable content and static endpoint state.
• Replay is a visual operation: it paints a rest pose before re-entering the same path. Magnetic replay samples the control's size once and uses the same pull/return spring; focus-blur replay emphasizes the first enabled item.

Technologies

• Upstream: Amicro, MIT, Copyright (c) 2026 SYED SUBHAN UDDIN.
• Behavioral sources: src/components/AnimatedButton.tsx:39–415, src/data/buttons.tsx:43–77, src/components/cards/FocusBlur.tsx:17–73. Registry hover/magnetic-button.tsx and hover/glow-button.tsx were reviewed; their standalone registry variants belong to the Motion interaction family.
• Original glyphs come from the upstream lockfile's pinned lucide-react 0.546.0. All 46 SVG icons retain their source nodes and geometry attributes; only React keys are omitted. The ISC and Feather-derived MIT notices are preserved in full in icons.ts's @license header.
• TuffEx implementation: motion-button/src/TxMotionButton.vue, catalog.ts, icons.ts and MotionButtonGlyph.vue. Stroke changes reuse IconMorph, value changes reuse TextMorph, and physics/lifecycle reuse the existing shared spring and useMotionActivity. An activity-boundary key destroys the old morph controller rather than merely changing its reduced-motion flag.
• The table below preserves all 35 actual combinations; these IDs change glyphs, interaction parameters, fills and retention, not just labels. The fixed labels are source metadata; the caller supplies rendered copy.