Pressable

An unstyled clickable surface: button semantics - keyboard activation, focus ring, disabled state - with none of a button's looks.

Source

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.

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.