Pressable

Source

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#

Embed not loading? Click here

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#

Name	Required	Type	Default	Description
`onPress`	No	({ nativeEvent: PressEvent }) => void		Function called when the component is pressed.
`onPressIn`	No	({ nativeEvent: PressEvent }) => void		Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
`onPressInDelay`	No	number	`null`	Duration (in milliseconds) to wait after press down before calling onPressIn.
`onPressOut`	No	({ nativeEvent: PressEvent }) => void		Called when a touch is released.
`onLongPress`	No	({ nativeEvent: PressEvent }) => void		Called if the time after onPressIn lasts longer than 500 milliseconds. This time period can be customized with `delayLongPress`
`hitSlop`	No	Rect \| number		Sets additional distance outside of element in which a press can be detected.
`isDisabled`	No	boolean	`false`	If true, the press behavior is disabled.
`_pressed`	No	object	`{}`	Style properties that are applied when the component is in a pressed state.
`_hovered`	No	object	`{}`	Style properties that are applied when the component is in a hovered state.
`_disabled`	No	object	`{}`	Style properties that are applied when the component is in a disabled state.