Usage
The touch press model every Astryx pressable uses, for a local component that paints its own press. Under a finger, CSS :active paints on the touch itself and can outlive the start of a scroll; the press model instead tracks the touch the way UIKit tracks a control: it highlights as the finger lands (after the content-touch delay inside a scroller, where a flick paints nothing), a quick tap answers at the lift, and a scroll that takes the touch cancels it with no fade. The release fades over the 250 ms of a UIButton (ease-in-out) under a coarse primary pointer and over 200 ms with any other; under reduced motion it is an opacity cross-fade of 200 ms or less on a touch screen and immediate otherwise. One document-level controller does this for every marked element (installed by the first pressable to mount, removed by the last to unmount), so calling the hook adds no listener or state to your element. On a desktop a mouse press is still your :active rule: keep it, and drop it under @media (pointer: coarse) the way the built-in components do. That query reads the primary pointer, so on a phone or tablet it also drops :active for a connected mouse, trackpad or keyboard; the controller paints those presses there (at once, faded at the release), so nothing goes unanswered.
ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Spread the result on the element whose background paints the press and compose one of |
| Do | Let the composed style own the press on every pointer: it keeps |
| Don't | Add a pointer listener or React state to the element to track the press; the controller already writes the attribute, and per-element listeners are what a long list cannot afford. |
| Don't | Call it for a control rendered by an Astryx component; those are marked already, and the innermost marked element takes the press. |
Returns
| Field | Type | Description |
|---|---|---|
| pressableProps | {'data-astryx-pressable': ''} | The marker attribute to spread on the element that paints the press. Compose one of |
Use with shadcn
Already using the shadcn registry workflow? Install the real Astryx package and a local public re-export. Component implementation source stays in Astryx.
This install URL expires with the draft preview.bash