FeedbackGenerated from the public API
Pressable
The pointer-level press contract, extracted so any surface can have it.
@luc/ui/motionLive preview
Lift, press and grow are three separate props, because a dense grid wants none of them.
A pressable surface
<Pressable as="div" lift press tabIndex={0}>
<Text variant="body">A pressable surface</Text>
</Pressable>Usage
import { Pressable } from "@luc/ui/motion";<Pressable as="div" lift press tabIndex={0}>
<Text variant="body">A pressable surface</Text>
</Pressable>API
| Export | Kind | Signature |
|---|---|---|
Pressable | 6 documented props | ({ className, children, as, href, lift, press, growOnHover, disabled, ...props }: PressableProps) => import("@types/react").JSX.Element |
Pressable props
Type: PressableProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
as? | PressableTag | undefined | — | |
disabled? | boolean | undefined | — | |
growOnHover? | boolean | undefined | — | Scale up slightly on hover. |
href? | string | undefined | — | |
lift? | boolean | undefined | — | Lift the element on hover. |
press? | boolean | undefined | — | Scale down while pressed. |
Accessibility
The accessibility contract is the one the primitive underneath the component already honours — the platform element for a control, or the ARIA pattern the component implements — and the Showcase's own pages are scanned for violations with axe.
What happens on the server, and when hydration changes it.
Family
Feedback
A press, a change, a selection — acknowledged without shouting.
Related