Pressable API

API reference for the Pressable component: its props with their token values and defaults, the styled-system prop groups, and forwarded HTML attributes.

Demos

For usage examples, visit the component demo page: Pressable

Import

import { Pressable } from '@soroush.tech/design-system/Pressable'

Props

Also accepts every space, layout, border, and typography styled-system prop, plus the usual HTML attributes (onClick, aria-*, data-*, ...).

Prop	Type	Default	Description
`as`	`ElementType`	`'div'`	Element to render. `'button'` for native semantics; anything else is shimmed.
`feedback`	`'none' \| 'opacity' \| 'highlight'`	`'none'`	What happens while the surface is held. See the table below.
`color`	`PaletteColor`	`'primary'`	Palette the `highlight` tint derives from - resolves against `theme.palette`.
`activeOpacity`	`number`	`0.7`	Opacity held content fades to under `feedback="opacity"`.
`href`	`string`	-	Renders an `a` element when `as` is unset.
`target`	`string`	-	Anchor `target` - only meaningful with `href`.
`rel`	`string`	-	Anchor `rel` - only meaningful with `href`.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Emitted only for `as="button"`, so a surface in a form never submits by accident.
`disabled`	`boolean`	`false`	Blocks activation, suppresses press feedback, and swaps the cursor. Uses the native attribute on a button, `aria-disabled` elsewhere.

Feedback modes

Mode	While held
`none`	Nothing - the wrapped content is left completely alone.
`opacity`	The whole surface fades to `activeOpacity`.
`highlight`	The surface fills with `color` at 12.5% opacity behind the content.

Padding and a borderRadius are worth setting alongside highlight - the tint is drawn on the element's own box, so without them it hugs the content and squares off at the corners.

Accessibility

Enter and Space activate it and it lands in the tab order, whether it renders a native button or a shimmed element - you never write role, tabIndex, or onKeyDown yourself. Space is suppressed on keydown (so the page does not scroll) and fires on keyup, as a real button does.
Give it an accessible name: readable text among its children, or an aria-label when the content is icon-only.
The :focus-visible ring is keyboard-only. outline: none is the resting state, so pointer clicks show no ring.
Press feedback is decorative. Anything a sighted user learns from the press state must also be conveyed semantically - aria-pressed for a toggle, aria-expanded for a disclosure.

Theming

Slot	Element
`root`	The rendered element.

Customize via theme.components.Pressable.styleOverrides, and set app-wide defaults for feedback, color, and activeOpacity via theme.components.Pressable.defaultProps.

Source code

If this page does not answer your question, have a look at the implementation of the component for more detail.