fetaUI
GitHub

Tear Button

A ticket you confirm by tearing off its stub.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/tear-button
Playground
Redeem ticketTear the stub to confirm
Tones
Redeem ticketTear the stub to confirm
Redeem ticketTear the stub to confirm
Redeem ticketTear the stub to confirm
Labels
Use voucherTear the stub to confirm
Disabled
Redeem ticketTear the stub to confirm
Tone
Icons animation
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/tear-button

Tones

Default for routine confirms, Muted for quiet ones, Danger when something is given up.

Redeem ticketTear the stub to confirm
Redeem ticketTear the stub to confirm
Redeem ticketTear the stub to confirm
Motion

Accessibility

  • The stub is a native button.
  • The result is announced as a status.

Motion

  • The stub swings on a 900/42 spring and falls away.
  • With reduced motion, the stub fades.

Responsive behavior

  • The ticket fits the width on small screens.

Performance

  • The stub runs on a motion value, so dragging does not re-render on each frame.
  • The fallen stub mounts only after a tear and uses transform and opacity.
  • The reset timer clears on unmount.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import from @/components/fetaui/tear-button.
  • Run the action in onTear. A press alone does nothing: it takes a drag past 44 px, a flick, Enter or Space.
  • It resets itself after 2.4 s, so block repeat redemptions on your side.
  • Change all four labels for other actions.
  • The demo redeems nothing. Wire up onTear.
/docs/components/tear-button/markdown
PreviousColor Selector
NextPull-chain light

Related

Slide To ConfirmComponentDrag the thumb across to confirm. Past 90% or a fast flick, it commits.Hold To ConfirmComponentPress and hold: a sweep crosses the button and the action fires when it reaches the far edge. Let go early and it springs back.Undo ButtonComponentAn action with a window to take it back.ButtonComponentOne family for every action, with a label, optional icons and a shortcut key.