---
title: Pressable | UI
description: Pressable is a lower level primitive if you need more flexibility than a button and access to hover, pressed and focus events.
pageTitle: Pressable
pageDescription: Pressable is a lower level primitive if you need more flexibility than a button and access to hover, pressed and focus events.
showHeader: true
---

import { Meta } from '@storybook/addon-docs';

<Meta title="components/Forms/Pressable" />

import { Pressable, Center } from './Pressable';
import { transformedCode } from '../../../utils';
import { AppProvider, CodePreview, Text } from '@gluestack/design-system';

import { styled } from '@dank-style/react';

import Wrapper from '../../Wrapper';

# Installation

This command copies the `Pressable` component to your project.

```jsx
npx install @gluestack-ui add pressable
```

## Import

```jsx
// import the component from your component folder
import { Pressable } from 'components';
```

<br />

# Basic

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
 <Pressable
  onPress={() => console.log('Hello')}
  sx={{ h: 100, w: 200 }}>
    <Center
      sx={{
        h: '100%',
        w: '100%',
        bg: '$primary500',
      }}
    />
</Pressable>
`,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Wrapper,
        Pressable,
        Center,
        Text,
      },
      argsType: {},
    }}
  />
</AppProvider>
<br />

## Anatomy

The pressable component consists of the following parts:

```jsx
export default () => (
  <Pressable>
    <Text>Pressable</Text>
  </Pressable>
);
```

## API Reference

### Pressable

It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable#props) component.

<br />
<br />

# Advanced

## Customizing the Pressable

For customizing the Pressable, you have to map styled view to Pressable. You can refer [dank.style](https://dank.style/) for more information on how to use styled components.

### Usage

```jsx
// import the styles
import { Root } from '../components/core/pressable/styled-components';

// mapping the Pressable to root component
const Pressable = Root;

// Using the Pressable component
export default () => (
  <Pressable>
    <Text />
  </Pressable>
);
```

Default styling of the component can be found in the `components/pressable` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/ui-components/Pressable/index.tsx) of the styled `Pressable` component.