Pressable

A touchable Box. It accepts every Box styling prop plus touch handlers, so it can wrap anything, an icon, a card, a row of content, and make it tappable. It's the building block Button and IconButton are composed from.

List row

Notifications

Manage how you're notified

import { ChevronRightIcon } from '@devraj-labs/vajra-ui-icons';

<Pressable bg="surface" rounded="r-3" p="s-4" onPress={() => {}}>
  <Row justify="space-between" align="center">
    <Col gap="s-1">
      <Text variant="bodyMedium">Notifications</Text>
      <Text variant="bodySmall" color="textMuted">
        Manage how you're notified
      </Text>
    </Col>
    <ChevronRightIcon size={20} />
  </Row>
</Pressable>

Icon-only

Wrapping a bare icon, sized and centered, is how IconButton is built internally.

import { XIcon } from '@devraj-labs/vajra-ui-icons';

<Pressable w={40} h={40} rounded="r-2" align="center" justify="center" onPress={() => {}}>
  <XIcon size={18} />
</Pressable>

Avatar with caption

yourstory

<Pressable onPress={() => {}}>
  <Col gap="s-2" align="center">
    <Avatar src="https://i.pravatar.cc/150?img=12" initials="JD" />
    <Text variant="bodySmall">yourstory</Text>
  </Col>
</Pressable>

Inline action (like/reply)

Two independent Pressables inside one row, each with its own hit area.

128

Reply

import { HeartIcon } from '@devraj-labs/vajra-ui-icons';

<Row gap="s-4" align="center">
  <Pressable onPress={() => {}}>
    <Row gap="s-1" align="center">
      <HeartIcon size={16} />
      <Text variant="bodySmall">128</Text>
    </Row>
  </Pressable>
  <Pressable onPress={() => {}}>
    <Text variant="bodySmall" color="textMuted">Reply</Text>
  </Pressable>
</Row>

Disabled

Unavailable

<Pressable bg="surface" rounded="r-3" p="s-4" disabled onPress={() => {}}>
  <Text variant="bodyMedium" color="textMuted">Unavailable</Text>
</Pressable>

Props

Prop	Type	Default	Description
bg	TVajraColors		Background color token.
borderColor	TVajraColors		Border color token.
rounded / roundedT / roundedB / roundedL / roundedR	TRoundedToken		Corner radius token.
m / mx / my / mt / mb / ml / mr	TSpacingToken		Margin tokens.
p / px / py / pt / pb / pl / pr	TSpacingToken		Padding tokens.
gap	TSpacingToken		Gap token.
opacity	number		Opacity.
activeOpacity	number		Opacity while pressed.
onPress	() => void		Press handler.
disabled	boolean		Disables interaction.

Also accepts all remaining Box layout props (w, h, flex, justify, align, direction, position, etc.) and standard React Native TouchableOpacity props.

Need pre-styled, semantic tappable elements instead? See Button or IconButton.