iconiq
—Open GitHub

Button

CVA variants with spring hover and tap feedback. Forwards refs and standard button attributes while staying aligned with the rest of the system.

Open in

Win the press,thenthe break- that's the half in two beats.

Installation

npx shadcn@latest add @iconiq/button

Props

Button

6 props

Ref-forwarding button built on motion.button plus a CVA recipe for size and variant styling.
variant"default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
Defaultdefault
Chooses the visual recipe from the exported buttonVariants map.
size"sm" | "md" | "lg" | "custom"
Defaultmd
Controls height and padding. The custom size leaves sizing classes empty so the caller can drive layout entirely through className.
type"button" | "submit" | "reset"
Defaultbutton
Passed directly to the underlying motion.button so the component does not submit forms accidentally by default.
childrenReactNode
Content rendered above the ripple layer inside a z-10 span.
classNamestring
Merged after the generated CVA classes, making it the main escape hatch for one-off layout changes.
disabledboolean
Native disabled state. It also prevents ripple creation because the pointer-down handler exits early.

Notes

Standard button attributes such as onClick, aria-*, name, form, and data-* are forwarded to the underlying motion.button.
The local pointer-down handler always calls your onPointerDown first, then decides whether to spawn a ripple.
Reduced-motion users still get the button component, but the ripple effect is skipped.