Signature / Moleculestable

Ripple Button

Button with liquid ripple effect on press.

@glinui/uiComponent: ripple-button

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add ripple-button

Usage$

RippleButton is a "use client" component. Click it to see a liquid ripple expanding from the click point.

Basic$

TSX

1"use client"
2import { RippleButton } from "@glinui/ui"
3
4export function RippleButtonDemo() {
5return (
6  <div className="flex items-center justify-center gap-4 p-8">
7    <RippleButton>Click Me</RippleButton>
8    <RippleButton variant="glass">Glass</RippleButton>
9    <RippleButton variant="frosted">Frosted</RippleButton>
10    <RippleButton variant="outline">Outline</RippleButton>
11  </div>
12)
13}

Examples$

Sizes$

TSX

1"use client"
2import { RippleButton } from "@glinui/ui"
3
4export function RippleButtonSizesDemo() {
5return (
6  <div className="flex items-center justify-center gap-4 p-8">
7    <RippleButton size="sm">Small</RippleButton>
8    <RippleButton size="md">Medium</RippleButton>
9    <RippleButton size="lg">Large</RippleButton>
10  </div>
11)
12}

Accessibility$

Renders as a <button> with type="button".
Ripple spans are aria-hidden="true".
Supports all standard button attributes.

Reduced Motion$

Ripple animations are hidden via motion-reduce:hidden.

API Reference$

Prop	Type	Required	Default	Description
`rippleColor`	`string`	No	`-`	Ripple color
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Button size
`variant`	`"default" \| "glass" \| "frosted" \| "outline"`	No	`"default"`	Button variant

Source$

TSX

1import { RippleButton } from "@glinui/ui"

packages/ui/src/components/ripple-button.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/ripple-button.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

RippleButtonProps

`RippleButtonProps`

Prop	Type	Required	Default	Description
`rippleColor`	`string`	No	`-`	Ripple color
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Button size
`variant`	`"default" \| "glass" \| "frosted" \| "outline"`	No	`"default"`	Button variant