Loading…

Ripple Button

beta

A Button that sends a ripple out from wherever it is pressed — concurrent ripples stack, and Enter or Space ripple from the centre.

Forms
1 file
1 npm package
Accessibility notes

Playground

Installation

The CLI installs button as well, because this component imports it. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add ripple-button

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { RippleButton } from "@/components/ui/ripple-button";

Examples

Every example the tests run, live and operable, side by side.

Default
Variants
Tones
Large Surface

API

Generated from the component's own types, so a prop cannot appear here without existing.

<RippleButton>

Prop	Type	Default
`rippleTone`	`"auto" \| "primary" \| "primary-foreground" \| "foreground" \| "background" \| "success" \| "destructive"`	`"auto"`

Accessibility

A native button with every Button behaviour, including loading and disabled. Ripples are aria-hidden, pointer-transparent spans that remove themselves when they finish, so they never reach the accessibility tree or block a click. Keyboard presses (Enter, Space) ripple from the centre, so the feedback does not depend on a pointer. Under reduced motion the ripple is collapsed to an instant and disappears.

Quality

Measured from the source and its tests at build time.

All scores

7/7

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — does not apply
className merged — passes
Visible focus — does not apply
No fixed widths — passes