Haptic Button React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Haptic Button is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import HapticButton from @/components/ui/haptic-button.

import { Trash2 } from "lucide-react"
import { HapticButton } from "@/components/ui/haptic-button"

export function DeleteClient({ onDelete }: { onDelete: () => Promise<void> }) {
  return (
    <HapticButton
      tone="danger"
      variant="soft"
      mode="hold"
      holdDuration={1200}
      leftIcon={<Trash2 />}
      fullWidth
      onConfirm={onDelete}
      labels={{
        holdHint: "Hold to delete",
        confirmed: "Deleted",
        activateAgain: "Activate again to delete",
      }}
    >
      Delete Old Mill Bakery
    </HapticButton>
  )
}

Props

• childrendefault "Send"
  ReactNode

  The label. For icon sizes pass the icon and an aria-label. The playground swaps the sample for "Hold to send" in hold mode.

• variantdefault "solid"
  "solid" | "soft" | "outline" | "ghost"

  The button's variants (no link: a link has no surface to ripple or fill).

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Semantic color from the design tokens. danger for a hold to delete, brand for a hold to pay.

• colordefault ""
  string

  Any CSS color. Replaces the tone in every variant; text on a solid fill turns black or white by lightness.

• sizedefault "md"
  "sm" | "md" | "lg" | "icon-sm" | "icon" | "icon-lg"

  The button's sizes: 32 / 40 / 48px, square icon sizes. On touch screens md grows to 44px and sm gets a 44px hit area.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  Corner shape, scaled per size like the button. The ripple and the fill follow it.

• effectdefault "both"
  "scale" | "ripple" | "both" | "none"

  Press feedback: the 0.97 dip on a snappy spring, a ripple spreading from the touch point (keyboard presses ripple from the center), both, or none. In hold mode the fill replaces the ripple.

• rippleColordefault ""
  string

  The ripple color. Empty uses the text color at 16%; a custom color shows at 30%.

• loadingdefault false
  boolean

  Spinner in place of the label, width kept, aria-busy; presses and holds are ignored and focus stays. Also on while an onConfirm promise runs.

• loadingText
  ReactNode

  Text next to the spinner while loading. The button reserves room for it.

• disableddefault false
  boolean

  Dims the button and blocks presses, holds and long presses.

• fullWidthdefault false
  boolean

  Stretches to the container width, the usual choice for the main action on a phone.

• modedefault "press"
  "press" | "hold"

  press is a normal button. hold: a click does nothing; holding a finger, the mouse button, Space or Enter for holdDuration fills the button and calls onConfirm. For destructive or money actions that deserve more than a tap but less than a dialog.

• holdDurationdefault 1200
  number

  Milliseconds of holding to confirm, clamped to 300..5000.

• showSuccessdefault true
  boolean

  After onConfirm (and its promise) a check replaces the label for 1.2s and the button gets data-confirmed.

• hapticsdefault true
  boolean

  Haptic ticks through lib/haptics on touch and pen presses (never for a mouse or on desktops). Turn off app-wide with configureHaptics({ enabled: false }).

• hapticKinddefault "light"
  "selection" | "light" | "medium" | "heavy" | "success" | "warning" | "error"

  The press-mode tick. Hold mode always plays light at the start, success on confirm, warning on a too-short tap and error on a rejected promise; a long press plays medium.

• typedefault "button"
  "button" | "submit" | "reset"

  Defaults to "button". In hold mode a submit button never submits on a click; submit from onConfirm.

• leftIcon
  ReactNode

  An icon before the label. Unsized svgs follow the size (14 / 16 / 18px).

• rightIcon
  ReactNode

  An icon after the label.

• spinner
  ReactNode

  Replaces the default spinner.

• onClick
  (event: MouseEvent<HTMLButtonElement>) => void

  Press mode only, and not while loading or disabled. Hold mode never calls it: put the action in onConfirm.

• onConfirm
  () => (void | Promise<unknown>)

  Hold mode's action, called when the fill completes. A promise shows the loading state, then the check; a rejection shakes the button, plays an error tick and announces labels.failed.

• onHoldStart
  () => void

  A hold began (finger, pen, mouse button, Space or Enter).

• onHoldCancel
  () => void

  A hold ended before the fill completed: released, moved past 8px, left the button, window blurred, or disabled.

• onLongPress
  (event: LongPressEvent<HTMLButtonElement>) => void

  Press mode's secondary action: a 450ms touch or pen hold (through useLongPress), a right click, Shift+F10 or the ContextMenu key. The click after a long press is swallowed; screen readers hear labels.longPressHint.

• labels
  Partial<HapticButtonLabels>

  Strings: holdHint "Hold to confirm", holding "Keep holding", confirmed "Done", failed "That did not work, try again", longPressHint "Press and hold for more options", activateAgain "Activate again to confirm" (hold mode, after a click from assistive tech). DEFAULT_HAPTIC_BUTTON_LABELS holds the defaults.

• classNames
  Partial<Record<"effects" | "ripple" | "fill" | "content" | "icon" | "spinner" | "check" | "hint", string>>

  Extra classes for the inner parts: the effects layer, each ripple, the hold fill, the label, icons, spinner, check and hint chip.

• className
  string

  Extra classes for the button itself, merged last. Override the tone vars here, e.g. [--tone-foreground:white].

Parts

FAQ

More React mobile components