Skip to main content

Pressable

The Pressable is a functional component use to make interactive elements such as buttons, links, and more.

Importing the Component#

Import#

import { Pressable } from "pearl-ui";

Usage#

<Pressable  p="4"  onPress={() => {    console.log("I was pressed!");  }}  backgroundColor="primary.500">  <Text>Press me!</Text></Pressable>

Customizing the Pressed state#

The Pressable component allows you to customize the appearance of the component when it is in a pressed state. This can be done using the _pressed prop. See the example below for more details:

// Customizing the pressed state<Pressable  p="4"  onPress={() => {    console.log("I was pressed!");  }}  backgroundColor="primary.500"  _hovered={{ backgroundColor: "primary.700" }}  _pressed={{ backgroundColor: "primary.800" }}>  <Text>Press me!</Text></Pressable>

Customizing the Disabled state#

The Pressable component allows you to customize the appearance of the component when it is in a disabled state. This can be done using the _disabled prop. See the example below for more details:

// Customizing the disabled state<Pressable  p="4"  onPress={() => {    console.log("I was pressed!");  }}  backgroundColor="primary.500"  isDisabled={true}  _disabled={{ backgroundColor: "pink" }}>  <Text>Press me!</Text></Pressable>

Example#

Accessibility#

  • Pressable has the role of button.
  • Pressable has the default label set as 'Press me!'. A custom label can be specified using the accessibilityLabel prop.
  • Pressable expects an actionDescription prop to specify the intented outcome of interacting with the component eg. 'Closes modal', 'Go to the homepage', etc.

Component Properties#

Supported Styling Properties#

Pressable supports all properties related to the Box component.

Additional Properties#

NameRequiredTypeDefaultDescription
onPressNo({ nativeEvent: PressEvent }) => voidFunction called when the component is pressed.
onPressInNo({ nativeEvent: PressEvent }) => voidCalled immediately when a touch is engaged, before onPressOut and onPress.
onPressInDelayNonumbernullDuration (in milliseconds) to wait after press down before calling onPressIn.
onPressOutNo({ nativeEvent: PressEvent }) => voidCalled when a touch is released.
onLongPressNo({ nativeEvent: PressEvent }) => voidCalled if the time after onPressIn lasts longer than 500 milliseconds. This time period can be customized with delayLongPress
hitSlopNoRect | numberSets additional distance outside of element in which a press can be detected.
isDisabledNobooleanfalseIf true, the press behavior is disabled.
_pressedNoobject{}Style properties that are applied when the component is in a pressed state.
_hoveredNoobject{}Style properties that are applied when the component is in a hovered state.
_disabledNoobject{}Style properties that are applied when the component is in a disabled state.