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 or a list cell (see profile): a control highlights as the finger lands (after the content-touch delay inside a scroller, where a flick paints nothing), a cell waits for that delay and yields to 10 px of travel, a quick tap answers at the lift, and a scroll that takes the touch cancels it with no fade. The release fades on the profile's clock. One document-level tracker 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; those presses are painted 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 |
| Do | Pass |
| Don't | Add a pointer listener or React state to the element to track the press; the tracker 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. |
Parameters
| Param | Type | Description |
|---|---|---|
options | Optional configuration. | |
options.profile | 'control' | 'cell' (default: 'control') | How a finger's press is tracked and released, after UIKit. |
Returns
| Field | Type | Description |
|---|---|---|
| pressableProps | {'data-astryx-pressable': '' | 'cell'} | The marker attribute to spread on the element that paints the press; its value is the profile. 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