Press and Hold Link
Interactive link that activates after holding left click until a countdown completes. Customize the ring, hover, tooltip, backdrop and timing to match your design.
Overview
This component lets users open a link by holding left click until a smooth countdown finishes. It is designed for interaction patterns that require intention, clarity and a bit of playful feedback. Every visual element can be adapted so it fits perfectly into your design system.
Features
Customize duration of the hold
Adjust ring width, color, background, line cap and size
Optional numbered countdown with full font control
Optional tooltip for accessibility with padding, font and color settings
Control the placement of all elements around the cursor
Enable and customize an overlay that appears while holding
How to use
Paste component into your prefered frame
Set the component's position type to "absolute"
Pin it to all four edges with value "0"
Add Z-Index above 2
The component now fills up the dimensions of the parent frame.
