Pressable

A headless interactive surface: click, hover, keyboard and context-menu events.

PressableProps packages/core/src/components/pressable.ts:19 ↗

Import

import { Pressable } from "@tarve/core";

Usage

Pressable.tsx

import { Pressable, Text, theme } from "@tarve/core";

let selected = false;

<Pressable
  padding={12}
  onClick={() => {
    selected = !selected;
  }}
  style={{
    radius: 8,
    background: selected ? theme.colors.muted : "transparent",
    hover: { background: theme.colors.muted },
  }}
>
  <Text>{selected ? "Selected" : "Click the whole row"}</Text>
</Pressable>

Props

Prop	Type	Default
`control`	`Control`	—
`disabled`	`boolean`	—
`focusable`	`boolean`	—
`modal`	`boolean`	—
`onBlur`	`() => void`	—
`onClick`	`() => void`	—
`onContextMenu`	`(position: { x: number; y: number }) => void`	—
`onEscape`	`() => void`	—
`onHover`	`(hovered: boolean) => void`	—
`onKeyDown`	`(key: string) => void`	—

Inherited from ViewProps 10 props

Prop	Type	Default
`align`	`Style["align"]`	—
`dismissOnOutside`	`boolean`	—
`dragRegion`	`boolean`	—
`flex`	`number`	—
`gap`	`number`	—
`justify`	`Style["justify"]`	—
`onOutsideClick`	`() => void`	—
`padding`	`Style["padding"]`	—
`portal`	`boolean`	—
`windowAction`	`"minimize" \| "toggleMaximize" \| "close"`	—

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle