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 waits 150 ms before believing a press, cancels it the moment the finger travels 10 px or a scroll claims the gesture, never brings it back inside that gesture, answers a quick tap at the lift, and fades the release over 200 ms — the clocks a native list uses. 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. Under a mouse nothing changes: keep your :active rule, and drop it under @media (pointer: coarse) the way the built-in components do.
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. How compatibility works.
This install URL expires with the draft preview.bash