# PressableFeedback

> Wraps any content with press feedback: a ripple from the pointer and a small scale-down.

Source: https://ui.jcsoftdev.com/docs/components/pressable-feedback

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

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

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

## Usage

```tsx
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](/storybook/?path=/story/atoms-pressablefeedback--default)
- [Ripple Only](/storybook/?path=/story/atoms-pressablefeedback--ripple-only)
- [Disabled](/storybook/?path=/story/atoms-pressablefeedback--disabled)
- [Narrow](/storybook/?path=/story/atoms-pressablefeedback--narrow)
- [Brutal Preset](/storybook/?path=/story/atoms-pressablefeedback--brutal-preset)

## Source

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