PressableFeedback

Wraps any content with press feedback: a ripple from the pointer and a small scale-down. Both are skipped under prefers-reduced-motion. It adds no semantics, so put it around (or let it contain) the real button or link.

Import

import { PressableFeedback } from "@jcsoftdev/ui/atoms";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/atoms/pressable-feedback.

Usage

export const Default: Story = {};

Source of the Storybook story.

Props

Prop	Type	Default	Description
ripple	boolean	true	Draws an expanding ripple from the pointer position.
scale	boolean	true	Scales the content down while pressed (uses the preset’s --press-scale).
disabled	boolean

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Ripple Only
• Disabled
• Narrow
• Brutal Preset

Source

packages/ui/src/atoms/pressable-feedback/pressable-feedback.tsx