Button

Action button for primary, secondary, and inline interactions.

When you are ready to ship withTapto finish.

Installation

npx shadcn@latest add @iconiq/b-button

ReducedMotion

Pass reducedMotionwhen you want the installed component to settle into its quieter motion path immediately. Leaving the prop unset still respects the user's system-level reduced motion preference.

When you are ready to ship withTapto finish.

Props

Button

11 props

Base UI button with the shadcn-style variant recipe, spring press feedback, optional intrinsic width animation, and Motion ripple layer.

Defaultdefault

Chooses the visual recipe from the exported buttonVariants map.

linkUnderline"motion" | "static"

Default"motion" (when variant is link)

Link variant only. motion keeps foreground text with a grey baseline underline that fills darker on hover. static uses the same text size as other variants with hover:underline.

Defaultdefault

Controls the shadcn-style height, padding, gap, radius, and icon sizing for text and icon-only buttons.

animateSizeboolean

Defaultfalse

Animates the button width with a spring as its intrinsic content changes, which is useful for labels like Continue, Saving..., and Saved on the same control.

disableRippleboolean

Defaultfalse

Skips the pointer ripple when you want only the press-state feedback. Link buttons also skip the ripple by default to avoid a contained splash on text-only actions.

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.

iconReactNode

Optional icon rendered inline with the label. Nested SVGs inherit the built-in 1rem sizing utility.

iconPosition"start" | "end"

Default"start"

Chooses whether the optional icon renders before or after the button text inside the same inline content row.

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 calls your onPointerDown first, then respects e.defaultPrevented before deciding whether to enter the pressed state or spawn a ripple.

Pointer, keyboard, and blur handlers keep the pressed state in sync so Space and Enter get the same immediate feedback as pointer input.

Reduced-motion users still get the static visual state changes, but spring motion and ripples are skipped.

animateSize works best on intrinsically sized buttons rather than width-constrained layouts such as w-full.

When you render an icon-only button, add an aria-label so assistive tech still gets an accessible name.

ReducedMotion

1 prop

Shared motion override for the motion-enabled exports documented on this page.

reducedMotionboolean

When true, the component uses its calmer motion path immediately. Leaving it unset still respects the user's system-level reduced motion preference.

Notes

This prop can force reduced motion on, but it does not opt out of OS-level accessibility preferences when the system is already requesting less motion.