Signature / Molecule

Ripple Button

Button with liquid ripple effect on press.

Edit on GitHub

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

Studio keyboard, 75%

$129.00, ships in 2 days

Your cart is empty

Installation$

Install from

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

Prefer the package?

Usage$

RippleButton is a "use client" component. Press it to see a ripple expand from the pointer position. The ripple uses the surface text colour at 30 percent, so it reads on light and dark scopes. Override with rippleColor.

Examples$

Variants$

Every variant of the shared vocabulary works, and the motion effect adapts to the surface colour. Omit variant for the ambient default (glinr).

import { RippleButton } from "@glinui/ui"


export function RippleButtonVariantsDemo() {
return (
  <div className="flex flex-wrap items-center gap-3">
    <RippleButton variant="glinr">glinr</RippleButton>
    <RippleButton variant="solid">solid</RippleButton>
    <RippleButton variant="plain">plain</RippleButton>
    <RippleButton variant="soft">soft</RippleButton>
    <RippleButton variant="outline">outline</RippleButton>
    <RippleButton variant="ghost">ghost</RippleButton>
    <RippleButton variant="gradient">gradient</RippleButton>
  </div>
)
}

Glass (opt-in)$

glass is never the default. It needs a colorful or photographic backdrop to read, so place it over imagery or inside a ThemeScope with a backdrop.

import { RippleButton } from "@glinui/ui"


export function RippleButtonGlassDemo() {
return (
  <RippleButton variant="glass">Glass</RippleButton>
)
}

import { RippleButton } from "@glinui/ui"


export function RippleButtonSizesDemo() {
return (
  <div className="flex flex-wrap items-center gap-3">
    <RippleButton size="sm">SM</RippleButton>
    <RippleButton size="md">MD</RippleButton>
    <RippleButton size="lg">LG</RippleButton>
  </div>
)
}

Accessibility$

Renders through Button: native <button>, 2px accent focus ring with offset, disabled and aria-busy states.
Accessible name comes from the label. Decorative effect layers are aria-hidden and pointer-events-none.
Defaults to type="button".

Reduced Motion$

No ripple is created under prefers-reduced-motion or data-glin-motion="none". The click handler still runs.

API Reference$

Prop	Type	Required	Default	Description
`rippleColor`	`string`	No	`-`	Ripple colour. Defaults to the button's own text colour at 30 percent, so it shows on light and dark surfaces.
`variant`	`ButtonVariant`	No	`-`	Vocabulary or legacy variant. Omit for the ambient default.

Source$

import { 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-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

RippleButtonProps

`RippleButtonProps`

Prop	Type	Required	Default	Description
`rippleColor`	`string`	No	`-`	Ripple colour. Defaults to the button's own text colour at 30 percent, so it shows on light and dark surfaces.
`variant`	`ButtonVariant`	No	`-`	Vocabulary or legacy variant. Omit for the ambient default.