Pressable
An unstyled button with buttery's press feedback and focus ring.
import { Pressable } from "@butteryui/core";Demo
When to use it
Use it for
- Making a custom surface clickable, such as a card or a swatch
Not for
- Standard actions: use Button
- Navigation: render a link with asChild instead of a button
Examples
Deck tile
A deck's tile that opens the deck on click, with press feedback, a hover lift and a focus ring.
Swatch button
A color swatch the user can pick: its name for screen readers, a ring while it's picked.
Lilac background
Variants and states
Press and focus
Scales to 0.97 while pressed; Tab shows the focus ring.
Props
Pressable
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | Render the single child element (such as a link) instead of a button, with Pressable's props merged
onto it. The child has to be something people can press: a button, an a with an href, or an
element with a role and a tabIndex. |
It also takes ComponentPropsWithRef<"button">.
Accessibility
A native button (type="button" by default) or its child with asChild; Enter and Space activate it. With aria-disabled it keeps focus and ignores presses.
| Keys | What they do |
|---|---|
| Enter or Space | Presses it, unless it's aria-disabled |
| Enter | Follows the link, when it renders one with asChild |
Motion
It scales to 97% while it's pressed, over `--bt-dur-press`, and springs back when it's let go.
With reduced motion: It still shrinks to 97% while it's pressed, but goes in and back out at once instead of easing.
Layout
It has no size or look of its own: a button with no padding or border, as big as its content, so the Surface or Control you compose it with sizes it. Its hit area is the whole element; keep it at least 24px square, and 28px tall for a standalone button.