KQ-1253 · PIN/PRESS

Pin Press

A pin toggle drawn as a push-pin over a small cork patch at three-quarters: a press pushes the pin part of the way in on the flick spring, and letting go drives it home with the press's speed while the head shrinks away, its shadow tightens, the head takes the hit on the recoil spring and a dimple ring spreads across the cork, and a to-top tag slides out from under the label on snap. Unpinning pulls the pin up on a heavy spring while the needle wobbles about its tip on an underdamped one and the shadow grows back. It is a button with aria-pressed and a constant name; Space pushes on the way down and pins on the way up, Enter pins at once, and Escape or blur mid-press lets the pin back out without committing.

KQ-1253 · PIN/PRESS

Q4 field schedule

Edited 2h ago · Coldbrook site

not pinned · sorted by last edit

Open it on the Studio stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/pin-press

Props

pressed / defaultPressed: boolean; default false; Whether the item is pinned, controlled or initial.
onPressedChange: (pressed: boolean) => void; default —; Fires from the press that pinned or unpinned; the pin lands only once the state actually changes.
label: string; default "Pin"; The word before pinning.
pressedLabel: string; default "Pinned"; The word once pinned; the label column keeps the widest of the words and the tag.
tag: boolean; default true; Show the small tag that slides out under the pinned word.
tagLabel: string; default "to top"; The tag's words: where a pinned item goes. Also read in the pinned description.
name: string; default label; The toggle's accessible name, the same in both states.
depth: number; default 0.6; How deep the pin goes in, 0 to 1: the needle hides, the head shrinks away, the shadow tightens and the ring spreads wider.
wobble: number; default 0.5; How loose the needle is as it comes out, 0 to 1: straight out, or a floppy wobble about its tip.
anticipation: number; default 0.5; How far a press pushes the pin before it is let go, 0 to 1 of the way home.
ringDuration: number; default 520; How long the dimple ring takes to spread across the cork, in ms.
compact: boolean; default false; Icon only: the pin and its cork in a round button, the words in its accessible name.
size: "sm" | "md" | "lg"; default "md"; 36, 40 or 48px tall.
pinColor: string; default "oklch(from var(--danger) 0.64 0.19 h)"; The pin's head, any CSS colour; a fixed lightness reads the same in both themes.
corkColor: string; default "oklch(from var(--warn) 0.76 0.07 h)"; The cork.
sound: boolean; default false; Play a thock as the pin lands home and a pop as the needle leaves the cork; only ever for the visitor's own press.
disabled: boolean; default false; Not pressable, drawn at half strength.
className: string; default —; Classes for the button.

Prop	Type	Default	Description
pressed / defaultPressed	boolean	false	Whether the item is pinned, controlled or initial.
onPressedChange	(pressed: boolean) => void	—	Fires from the press that pinned or unpinned; the pin lands only once the state actually changes.
label	string	"Pin"	The word before pinning.
pressedLabel	string	"Pinned"	The word once pinned; the label column keeps the widest of the words and the tag.
tag	boolean	true	Show the small tag that slides out under the pinned word.
tagLabel	string	"to top"	The tag's words: where a pinned item goes. Also read in the pinned description.
name	string	label	The toggle's accessible name, the same in both states.
depth	number	0.6	How deep the pin goes in, 0 to 1: the needle hides, the head shrinks away, the shadow tightens and the ring spreads wider.
wobble	number	0.5	How loose the needle is as it comes out, 0 to 1: straight out, or a floppy wobble about its tip.
anticipation	number	0.5	How far a press pushes the pin before it is let go, 0 to 1 of the way home.
ringDuration	number	520	How long the dimple ring takes to spread across the cork, in ms.
compact	boolean	false	Icon only: the pin and its cork in a round button, the words in its accessible name.
size	"sm" \| "md" \| "lg"	"md"	36, 40 or 48px tall.
pinColor	string	"oklch(from var(--danger) 0.64 0.19 h)"	The pin's head, any CSS colour; a fixed lightness reads the same in both themes.
corkColor	string	"oklch(from var(--warn) 0.76 0.07 h)"	The cork.
sound	boolean	false	Play a thock as the pin lands home and a pop as the needle leaves the cork; only ever for the visitor's own press.
disabled	boolean	false	Not pressable, drawn at half strength.
className	string	—	Classes for the button.