Effect Button
betaA Button with a hover and focus micro-interaction — slide-arrow, pulse, rotate, shake, glare, text reveal, expanding ring or clip corners.
- Forms
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add effect-buttonnpm packages installed: class-variance-authority.
import { EffectButton } from "@/components/ui/effect-button";Default
Gallery
Effects
Tones
Icon Only
Right To Left
As Link
Glitch
<EffectButton>
| Prop | Type | Default |
|---|---|---|
effectThe micro-interaction played while the button is hovered or keyboard-focused. | EffectButtonEffect | "slide-arrow" |
iconLeading icon. Decorative: the label (or | ReactNode | — |
toneColour the icon ( | EffectButtonTone | "current" |
trailingIconIcon that slides in at the end for | ReactNode | — |
Every effect plays on keyboard focus-visible as well as hover. Icons and decorative layers are aria-hidden, and text-reveal's duplicate label is hidden so the name is read once. Colour (tone) never carries meaning on its own: the label does. Effects stop under reduced motion. Inherits Button's loading and disabled behaviour.
8/8
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 — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes