Pressable Stable WINMACLNX

The standard interaction primitive. Use Pressable anywhere you need a tappable or clickable element.

Import

import { Pressable } from 'veloxkit'

Basic usage

<Pressable onPress={() => console.log('pressed!')}>
  <Text>Click me</Text>
</Pressable>

Dynamic style on state

style accepts a function that receives the current interaction state:

<Pressable
  style={({ pressed, hovered, focused }) => ({
    padding: '10px 20px',
    borderRadius: 8,
    background: pressed
      ? '#007A58'
      : hovered
      ? '#00C98E'
      : '#00A878',
    transform: pressed ? [{ scale: 0.97 }] : [],
    opacity: focused ? 1 : undefined,
    borderWidth: focused ? 2 : 0,
    borderColor: '#6BDFB8',
  })}
  onPress={handleSubmit}
>
  <Text style={{ color: '#fff', fontWeight: 600 }}>Submit</Text>
</Pressable>

Props

Prop	Type	Description
`onPress`	`() => void`	Called on tap/click release
`onPressIn`	`() => void`	Called on pointer/touch down
`onPressOut`	`() => void`	Called on pointer/touch up
`onLongPress`	`() => void`	Called after 500ms hold
`onHoverIn`	`() => void`	Called on pointer enter
`onHoverOut`	`() => void`	Called on pointer leave
`onFocus`	`() => void`	Called on keyboard focus
`onBlur`	`() => void`	Called on keyboard blur
`disabled`	`boolean`	Disables all interactions
`style`	`ViewStyle \| (state) => ViewStyle`	Static or dynamic style
`hitSlop`	`number \| Insets`	Expand the hit area
`delayLongPress`	`number`	ms before `onLongPress` fires (default 500)

Right-click / context menu

<Pressable
  onPress={openItem}
  onContextMenu={(e) => {
    e.preventDefault()
    showContextMenu(e.nativeEvent.pageX, e.nativeEvent.pageY)
  }}
>
  <Text>{item.name}</Text>
</Pressable>

Keyboard interaction

Pressable is keyboard-accessible by default. Space and Enter trigger onPress when focused.

Pressable does not render any visual appearance on its own. Apply styles to communicate interactivity to users — at minimum, a hovered style change.

Text TextInput