React button components
Buttons and other single-action controls, including destructive actions that need a deliberate confirmation step. Use these where a click or tap triggers an immediate, named effect rather than navigation.
33 components
Foil Block
A full-width closing CTA band built on hot foil blocking — a die strikes the headline's terminal word and a rule frame around the primary button, and only transfers foil where temperature AND pressure both clear a hard threshold at once. The spent web indexes forward after every strike, carrying a fading negative record of the last nine, so the band keeps moving with zero input.
Crimp Barrel Set
A 'connect/link/attach' confirm control modeled on open-barrel wire crimping: two dies flatten a barrel into a witness-marked, strand-flared profile on a repeating 3.6s demonstration cycle, alive at rest, with a press firing one crimp on demand.
Sinkhole Ravel
A destructive-action confirm modeled on cover-collapse sinkhole formation: a void chimneys upward through a canvas grain field as its ceiling grains individually ravel into the cavity below, until the crust can no longer bridge its own weight and drops in one fast collapse, backfilling partway before renucleating at a new spot. Click-arm-then-confirm gates a forced collapse.
Crack Arrest Hole
A press-and-hold STOP/ABORT confirm modeled on the crack-arrest (stop) hole: holding grows a fatigue crack from the edge toward a drilled hole, and reaching the hole halts it. Arrest is the confirmation, not a break-through.
Shakeout Crumble
Destructive-action confirm rendered as a foundry shakeout conveyor: a green-sand mould loses cohesion under vibration and crumbles away to reveal the casting, unforced and looping at rest, with a click-arm-then-confirm gesture layered on top to actually commit.
Growth Ring
Version history as a dendrochronological cross-section: one ring per save, ring width proportional to change size, a dark line wherever authorship changed hands, and restoring an older version previews the discard as outer rings hinging open before you confirm.
Routing Slip
A multi-party approval ledger styled as an interoffice routing slip: names print in fixed routed order, signing presses an ink chop beside your name, and signing out of turn lands visibly skewed with a written note rather than being hidden or blocked.
Brass Check
The active-sessions list as a pit-head lamp-room check board: each session is a stamped brass tag hanging on a hook, and signing one out is a hold-to-release gesture on a damped spring that hands off to real gravity, bouncing once into a role=log tray that IS the revocation history.
Frank Register
Paying from a prepaid wallet rendered as a postal franking meter: committing stamps an indicium onto the invoice while a descending BALANCE odometer rolls down and an ascending SPENT odometer rolls up by the same amount, the two always summing to credits purchased.
Remnant Cut
A plan-change proration panel drawn as a draper cutting cloth: the used billing period dims and stays, the unused remnant slides into the new plan's row re-measured against its rate, and the cents lost to rounding render as a labelled sliver at the cut instead of vanishing into a footnote.
Rapid Wire
Payment submission as an Edwardian cash railway: the amount folds into a wooden cup that catapults along a sagging catenary wire to the cashier post, rocks there while the server settles, then coasts back carrying the receipt and, when there is one, the change or instant refund as a separate line.
Seam Gild
A kintsugi payoff for consequential actions: confirming cracks the panel with a biased-random-walk SVG path in ~400ms, then immediately re-fills it from both ends as a bright raised seam. The scar stays for the rest of the browser session, so repeated confirmations accumulate as ornament instead of fading. Before any confirmation, a faint stress hairline draws in, holds, and dissolves on its own every few seconds, so the panel never sits as a dead frame.
Border Chrome Ring
Wraps any element in a thick tube of molten chrome: a WebGL shader fakes a 3D torus cross-section across the band width (not a flat gradient), lights it with a rotating banded environment reflection so bright/dark stripes sweep around the collar, and perturbs the band's own boundary with noise so it wobbles like liquid metal instead of holding a fixed shape. Hovering biases a specular hit toward the cursor; pressing bulges the metal outward and pools it toward the pointer; releasing sends a ripple once around the ring.
Signature Consent
Signature capture as consent: a canvas ink strip with pen-pressure feel that retraces itself in a clean witness replay before Confirm embosses it as Authorized.
Swipe Row Detent
A swipeable list row that clicks through machined detent stops (archive, then flag) and strains against a hard stop before overtravel arms delete, with a 3-second undo bar before it commits.
Switch Solder Bead
A boolean switch rendered as two liquid solder beads on a hairline rail, trading mass through a gooey neck that bulges, stretches and pinches off on toggle, with a ratio prop for rendering any partial allocation, not just on/off.
Confirm Hold Wax
Press-and-hold confirm as a molten wax seal: holding pours a wobbling gooey blob of deep crimson wax onto the document line, hold-complete drops a signet stamp that squashes it into a scalloped, monogrammed seal that cools, darkens and micro-cracks over 2s, while early release slumps the blob and drains it back.
Border Electric Arc
An electric border for a CTA: the outline crackles like a live wire via feTurbulence displacement, micro-arcs spark off the corners, and near the cursor the stroke opens a gap that tracks the pointer with an arc jumping across it. Pressing discharges the wire: a bright flash, then two seconds spent and calm.
Success Nucleation
A payment/deploy/publish success moment built on supercooling: pending is a canvas particle field in faint restless Brownian shimmer, and the instant it resolves a nucleation flash fires at the exact point pressed and dendritic crystal growth races outward, freezing the shimmer solid in ~700ms under a now-calm confirmation line.
Button Cooldown Heat
A rate-limited button that heat-soaks: each press deposits heat into a visible bottom-up fill, dilates its letter-spacing, swells its surface and brightens its border, growing a heat-haze shimmer as it nears the limit and decaying exponentially (fill draining, haze fading) when idle. Hammered past its duty cycle it soaks into a distinct hazard-hatched dead state, going dead on a flat 1px dip until it visibly cools back below the re-arm mark.
Success Plumb Bob
A success moment built on a plumb bob instead of confetti or a checkmark: the bob drops, overshoots into a damped pendulum swing, and the instant it settles collinear with a fixed datum line, a level line draws outward from its tip and the success text rises onto it.
Copy Button Travel
Copy-to-clipboard button whose confirmation shows what got copied: a duplicate of the source text visibly peels off the line and travels the real distance to the clipboard glyph before fading, arriving as the glyph gives a small catch-bounce and the label ticks to "Copied".
Copy Field Crimp
A copyable value field whose confirmation is typographic: letter-spacing crimps shut in a wave from the clicked character, then a check scales into the icon slot and holds. No toast, no green flash.
Undo Drift Bar
Deleted list row collapses in place to a thin labeled bar that drifts toward the trailing edge over the grace window. Distance traveled is the only clock, and pressing the bar pulls it back.
Button Retry Backoff
A retry button that visibly winds a torsion spring through its backoff: disabled and charging while a --foreground arc grows on real timing, notching every failure, pressable only once fully wound.
Confirm Dial Align
Destructive-action confirm gated on precision, not patience: rotate an SVG dial's notch to within 3deg of a fixed index, hold it there 400ms, and the dial snaps home and arms the confirm button. Overshoot and it springs back like a slipping safe tumbler.
Undo Ghost Row
A deleted list row leaves a dashed retinal ghost in its exact place that slowly closes over 8 seconds. Remaining height is remaining time, and clicking it any time before it vanishes restores the row with a spring.
Success Iron Filings
Success moment as magnetism: a field of drifting iron filings snaps to attention when the action confirms, migrating and aligning to draw the checkmark as revealed field lines, with a halo of off-path filings rotating to the local field direction.
Approval Inline Diff
Human-in-the-loop tool-call approval row: every argument is editable inline with an old→new diff, and deciding collapses the row irreversibly into a one-line receipt.
Segmented Control Fling
Segmented control with a visibly grabbable pill (grip dots, hover lift): fling it, it coasts on real release velocity, rubber-bands off the ends, and snaps into the nearest detent. Optional one-shot intro fling demos the mechanic on first view.
Confirm Slide Shatter
Frosted-glass confirm slider where drag distance drives Voronoi crack density. Release early and the cracks heal on a spring; complete the travel and the pane explodes into tumbling glass shards revealing the confirmed state.
Confirm Hold Ink
Press-and-hold destructive action: monochrome ink pours up from the press point, release early and it recoils.
Button Glass
Liquid-glass button with translucent blurred surface and press states.