Long Press Card Actions

ProNew

A grid of cards that open on tap and show a Save, Share and Remove action sheet on long press, right click or the Menu key, with a visible hint and a Save toggle that is announced. Use this when cards open something on tap and carry a few quick actions that need no extra screen.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use it when cards open something on tap and carry a few quick actions that need no extra screen.

Do not use it for cards whose actions are the main use (put buttons on them) or when users cannot discover a long press (show the hint).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`cards`	`{ id: string; title: string; saved?: boolean }[]`	`required`	The cards.
`onOpen`	`(id: string) => void`	`-`	Tap.
`onRemove`	`(id: string) => void`	`-`	Remove.

Accessibility

The card is a button; the same actions are available from the Menu key and Shift+F10, and a visible hint says so.
Save is a toggle whose label changes ("Save" or "Unsave") and whose result is announced in a status region.
Remove is destructive-styled; the sheet is titled with the card name.

Testing

The pattern ships with a Testing Library test (long-press-card-actions.test.tsx) that drives it through roles and the keyboard.