GlassKit UI
Primitives
Copy for LLM

Pressable

The focusable wrapper for custom UI. Renders a real button carrying the focusable class, so useDpad walks it and fires onPress on Enter or the Neural Band pinch. Use it to make any custom content D-pad-interactive when no first-class component fits.

Cast to
Playing in Living Room

Installation

npx @glasskit-ui/cli add pressable

Install the SDK (it provides GlassViewport, useDpad and the stylesheet), then copy these files into your project:

npm install @glasskit-ui/react
// components/lib/utils.tsimport { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge";export type { ClassValue };/** * Merge class names the shadcn way: clsx joins conditionals, tailwind-merge * de-dupes conflicting Tailwind utilities so a consumer's `className` override * wins (e.g. passing `px-2` beats the component's `px-6`). Lens components are * Tailwind utilities + `--gk-*` tokens, so this de-dupe matters. */export function cn(...inputs: ClassValue[]): string {  return twMerge(clsx(inputs));}/** * Accessible name from a free-form `label` prop: the label itself when it's a * plain string, otherwise undefined (a ReactNode can't become an aria-label). */export function stringLabel(label: unknown): string | undefined {  return typeof label === "string" ? label : undefined;}
// components/glasskit/pressable.tsximport type { ReactNode } from "react";import { cn } from "../lib/utils";/** * <Pressable> — the focusable wrapper for custom UI. Renders a real <button> * carrying the `focusable` class, so `useDpad()` walks it in spatial navigation * and fires `onPress` on Enter / the Neural Band pinch (the hook calls * `.click()`). Reach for it whenever you need to make your own content * D-pad-interactive and no first-class component (Button, List, Launcher) fits: * a custom card, a tile, a tappable row. It adds no chrome of its own beyond the * focus ring and press animation, so style the inside however you like. */export function Pressable({  children,  onPress,  disabled,  initialFocus = false,  "aria-label": ariaLabel,  className,}: {  children: ReactNode;  /** Fires on Enter / pinch (and click). */  onPress?: () => void;  disabled?: boolean;  /** Seed the D-pad ring here when the screen mounts (`data-autofocus`). */  initialFocus?: boolean;  "aria-label"?: string;  className?: string;}) {  return (    <button      type="button"      disabled={disabled}      onClick={onPress}      data-autofocus={initialFocus || undefined}      aria-label={ariaLabel}      className={cn("focusable gk-pressable", className)}    >      {children}    </button>  );}

Usage

// make any custom content D-pad-interactive<Pressable onPress={() => open(item)} className="my-card">  <YourCustomLayout item={item} /></Pressable>

Props

PropTypeDefaultDescription
childrenReactNode—Your content. Pressable styles nothing inside it.
onPress() => void—Fires on Enter / pinch (and click).
initialFocusbooleanfalseSeed the D-pad ring here on mount (data-autofocus).
disabledboolean—Dims and skips focus.

When to use

Most interactive needs already have a first-class component: a Button for actions, a List for rows, a Launcher for an app grid. Reach for Pressable when you are building something custom that none of those cover: a bespoke card, a media tile, a tappable stat.

Pressable is the one sanctioned way to make arbitrary content respond to the D-pad and the Neural Band. It renders a real <button> with the focusable class, so the focus engine includes it in spatial navigation and fires onPress on Enter or a pinch. It adds no visual chrome of its own beyond the focus ring and the press scale, so the content inside is yours to style.

import { Pressable } from "@/components/ui/pressable";

<Pressable onPress={() => open(photo)} className="photo-card">
  <img src={photo.src} alt={photo.alt} />
  <span className="caption">{photo.label}</span>
</Pressable>;

Do not hand-roll this with a plain <div onClick>: a div is not focusable, so the D-pad cannot reach it and the pinch never fires. Pressable (or any element that carries the focusable class and is genuinely focusable) is the contract.

Button

A D-pad-focusable action. Renders a real <button> with the focusable class, so useDpad walks it and activates it on Enter/Space. Primary wears the accent fill; positive and danger carry the semantic accept and destroy fills; ghost is chrome-less.

Toggle

A binary switch, D-pad-focusable. Controlled via checked + onChange. The knob slides on a logical margin, so it mirrors correctly under RTL.

On this page

When to use