Button

Action button for primary, secondary, and inline interactions.

Installation

npx shadcn@latest add @iconiq/b-button

Props

Button

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

Default default

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.

Default default

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

animateSizeboolean

Default false

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

Default false

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"

Default button

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.

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.

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.

buttonVariants

The CVA recipe exported alongside the component so matching button classes can be reused on links or custom wrappers.

Default "default"

Visual recipe passed to the CVA helper when composing classes outside the Button component.

Default "default"

Size token passed to the CVA helper for text and icon-only button recipes.

classNamestring

Optional classes merged after the generated variant and size classes.

Variants ship with six visual states and eight size tokens, including icon-only sizes.

Because buttonVariants is a plain CVA export, you can compose it independently from the Button component when you do not want a motion.button element.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: @base-ui/react, motion, class-variance-authority.

This page documents the Base UI install only, because Radix UI does not ship a separate button primitive.

The generated registry file is /r/b-button.json.