Liquid Button
betaAn outlined button that fills with rolling liquid on hover, focus and press — the label inverts as the surface passes it, and a press sloshes it.
- Forms
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add liquid-buttonnpm packages installed: class-variance-authority.
import { LiquidButton } from "@/components/ui/liquid-button";Default
Tones
Sizes
Wide
<LiquidButton>
| Prop | Type | Default |
|---|---|---|
size | "sm" | "md" | "lg" | "md" |
tone | "primary" | "foreground" | "destructive" | "success" | "primary" |
Plus every attribute of <button>.
A native button named by its children, read once: the liquid layer and the inverted duplicate label are aria-hidden. The fill responds to keyboard focus-visible and to being held down as well as to hover, so keyboard and touch users get the same feedback. Both label colours are paired tokens (tone on background, tone-foreground on tone), and the outline keeps the button visible at rest. Under reduced motion the waves stop, the fill swaps instantly and the press does not slosh.
10/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes