Button

Action button for primary, secondary, inline, loading, and routed interactions.

Installation

npx shadcn@latest add @iconiq/b-button

File Structure

Usage

import { Button } from "@/components/ui/b-button";

export function ButtonPreview() {
  return (
    <p className="flex flex-wrap items-center justify-center gap-x-2 gap-y-2 text-balance font-medium text-lg text-neutral-800 leading-snug tracking-tight sm:text-xl dark:text-neutral-100">
      <span>When you are ready to ship with</span>
      <span className="font-medium text-foreground">default</span>
      <span>tap</span>
      <span className="inline-flex translate-y-px align-middle">
        <Button variant="default">Continue</Button>
      </span>
      <span>to finish.</span>
    </p>
  );
}

Props

Description

Button

variant

Chooses the visual recipe from the exported buttonVariants map.

linkUnderline

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.

Type "motion" | "static"·Default "motion" (when variant is link)

size

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

animateSize

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.

Type boolean·Default false

loading

Locks the control, sets aria-busy, crossfades the label and icon into a spring-animated spinner, and suppresses ripples until loading finishes.

Type boolean·Default false

loadingIcon

Optional spinner or status icon shown while loading is true. Defaults to a Lucide Loader2 icon with animate-spin.

Type ReactNode

href

When set, renders an animated anchor instead of a button. Disabled and loading states use aria-disabled, tabIndex -1, and click prevention.

Type string

target

Anchor target such as "_blank". When the target opens a new tab, rel automatically gains noopener and noreferrer unless you already supplied them.

Type string

rel

Optional anchor rel attribute. Merged with noopener noreferrer when target includes _blank.

Type string

disableRipple

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 boolean·Default false

type

Passed to the underlying button element so the component does not submit forms accidentally by default. Ignored for href links.

Type "button" | "submit" | "reset"·Default button

children

Label content rendered above the ripple layer inside a z-10 span.

Type ReactNode

icon

Optional icon rendered inline with the label. Nested SVGs inherit the built-in size utility and variant-aware icon color.

Type ReactNode

iconLabel

Convenience prop that sets aria-label, which is required for icon-only sizes when no visible text children are present.

Type string

iconPosition

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

Type "start" | "end"·Default "start"

className

Merged after the generated CVA classes, making it the main escape hatch for one-off layout changes.

Type string

disabled

Native disabled state. Combines with loading to lock interaction and prevent ripple creation.

Type boolean

buttonVariants

variant

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

linkUnderline

Link variant only. Pass through the same underline mode used by the Button component.

Type "motion" | "static"·Default "motion" (when variant is link)

size

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

className

Optional classes merged after the generated variant and size classes.

Type string

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, lucide-react.

Embedded Iconiq theme tokens ship inside the component, so colors resolve without a separate theme install.

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.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.

When you are ready to ship withdefaulttapto finish.