Pressable

@coinbase/cds-web@8.21.3

Extends the Interactable component to add accessibility support for press interactions.

Import

import { Pressable } from '@coinbase/cds-web/system/Pressable'

SourceView source codeStorybookView Storybook

---

Related components

• Interactable,
• Button

---

󰏖

View as Markdown

Basic Pressable

Pressables support an onClick prop for handling click/press interactions. When being pressed, the element will scale down to mimic a real-world button press. If this functionality is not desired, pass the noScaleOnPress prop.

Loading...

󰙡

Live Code

<Pressable
  onClick={console.log}
  as="button"
  background="bgAlternate"
  borderColor="lineHeavy"
  borderWidth={100}
  borderRadius={300}
>
  <Box as="span" padding={2}>
    <Text font="headline" as="span">
      Click me...
    </Text>
  </Box>
</Pressable>

Pressable with Transparent Background

Loading...

󰙡

Live Code

<Pressable
  onClick={console.log}
  as="button"
  background="transparent"
  borderColor="lineHeavy"
  borderWidth={100}
  borderRadius={300}
>
  <Box as="span" padding={2}>
    <Text font="headline" as="span">
      Click me...
    </Text>
  </Box>
</Pressable>

Block Pressable

Pressables expand to 100% width when the block prop is passed.

Loading...

󰙡

Live Code

<Pressable
  block
  as="button"
  onClick={console.log}
  background="bgAlternate"
  borderColor="lineHeavy"
  borderWidth={100}
  borderRadius={300}
>
  <Box as="span" padding={2}>
    <Text font="headline" as="span">
      Click me...
    </Text>
  </Box>
</Pressable>

A11y

On mobile, all AccessibilityProps can be passed, with accessibilityComponentType and accessibilityTraits defaulting to button, and accessibilityState being set based on loading/disabled props.

On web, all ARIA attributes can be passed, with aria-busy being set based on loading/disabled props.

The as prop allows any component to be used, but be sure you are using semantically correct elements! For example, no clickable divs.