@bento/pressable

Pressable

The @bento/pressable package provides a standardized foundation for interactive elements in the Bento library. It exports the Pressable primitive, which provides consistent press interactions and accessibility features for building interactive components.

Installation

npm install --save @bento/pressable

Props

The @bento/pressable package exports the Pressable primitive:

import { Pressable } from '@bento/pressable';

<Pressable onPress={() => console.log('Div pressed!')}>
  <div>Press me</div>
</Pressable>

The following properties are available to be used on the Pressable primitive:

Prop	Type	Required	Description
children	ReactElement<any, string | JSXElementConstructor<any>>	Yes	A single React element that will be made pressable.
onPress	(e: PressEvent) => void	No	Handler that is called when the pressable is pressed.
Similar to the standard onClick event, but normalized to handle all interaction methods consistently.
onPressStart	(e: PressEvent) => void	No	Handler that is called when a press interaction starts.
onPressEnd	(e: PressEvent) => void	No	Handler that is called when a press interaction ends, either
over the target or when the pointer leaves the target.
onPressChange	(isPressed: boolean) => void	No	Handler that is called when the press state changes.
onPressUp	(e: PressEvent) => void	No	Handler that is called when a press is released over the target, regardless of
whether it started on the target or not.
slot	string	No	A named part of a component that can be customized. This is implemented by the consuming component.
The exposed slot names of a component are available in the components documentation.
slots	Record<string, object | Function>	No	An object that contains the customizations for the slots.
The main way you interact with the slot system as a consumer.

For all other properties specified on the Pressable primitive, the component will pass them down to the direct child element of the component. Which would be the equivalent of you adding them directly to the child element.

import { Pressable } from '@bento/pressable';

function MyComponent() {
  return (
    <Pressable onPress={() => console.log('Pressed!')}>
      <div>Press me</div>
    </Pressable>
  );
}

Examples

Basic Div Element

The simplest way to use Pressable is to wrap a div element. The component will handle all the necessary accessibility features and interaction states.

<Source language='tsx' code={ DivExample } />

Link Element

You can also make link elements pressable while maintaining their semantic meaning and default browser behavior.

<Source language='tsx' code={ LinkExample } />

Custom Component

For custom components, you need to forward the ref and pass props to the underlying element to ensure proper functionality.

<Source language='tsx' code={ CustomExample } />

Accessibility

The Pressable component automatically handles accessibility features:

• Keyboard Navigation: Supports Enter and Space key activation
• Focus Management: Proper focus handling and focus-visible states
• ARIA Attributes: Automatically applies appropriate ARIA attributes
• Screen Reader Support: Works seamlessly with assistive technologies

Data Attributes

The following data attributes are exposed and can be used for styling:

• data-pressed - True when the button is being pressed
• data-hovered - True when the button is hovered
• data-focused - True when the button has focus
• data-focus-visible - True when focus should be visible (keyboard navigation)

[data-pressed='true'] {
  background-color: #ccc;
}

[data-focus-visible='true'] {
  outline: 2px solid blue;
}