Button React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Usage

Import Button from @/components/ui/button.

import { ArrowRight } from "lucide-react"
import { Button } from "@/components/ui/button"

export function CheckoutActions({ paying, onPay }: { paying: boolean; onPay: () => void }) {
  return (
    <div className="flex gap-2">
      <Button variant="ghost">Cancel</Button>
      <Button tone="brand" loading={paying} loadingText="Paying" rightIcon={<ArrowRight />} onClick={onPay}>
        Pay now
      </Button>
    </div>
  )
}

Props

• childrendefault "Continue"
  ReactNode

  The label. For icon sizes pass the icon itself and an aria-label.

• variantdefault "solid"
  "solid" | "soft" | "outline" | "ghost" | "link"

  solid for the one main action on a screen, soft or outline for secondary actions, ghost for toolbars and dense rows, link for actions inside text (always underlined, so it reads as a link without color or hover).

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Semantic color from the design tokens. neutral is black in light mode and white in dark mode; danger is for destructive actions.

• sizedefault "md"
  "sm" | "md" | "lg" | "icon-sm" | "icon" | "icon-lg"

  Height 32 / 40 / 48px with matching padding, type and icon size. The icon sizes are square. On touch screens md grows to 44px and sm keeps its look with a 44px hit area.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  Corner shape. Scales with the size (md is 8 / 10 / 12px) so every size reads as the same shape; full makes a pill.

• colordefault ""
  string

  Any CSS color. Replaces the tone in every variant; text on a solid fill turns black or white by lightness. Leave empty to use the tone.

• loadingdefault false
  boolean

  Shows a spinner in place of the label, keeps the width, sets aria-busy and ignores clicks. The button stays focusable, so keyboard focus is not lost.

• loadingTextdefault ""
  ReactNode

  Text next to the spinner while loading, like "Saving". The button reserves room for it, so it never changes width.

• disableddefault false
  boolean

  Dims the button and blocks it. With asChild the link gets aria-disabled and leaves the tab order.

• fullWidthdefault false
  boolean

  Stretches to the container width. The usual choice for the main action at the bottom of a phone screen.

• asChilddefault false
  boolean

  Renders your single child (an <a>, a router Link) with the button's look, press and icons, instead of a <button>. The demo swaps in a link.

• leftIcon
  ReactNode

  An icon before the label. Unsized svgs follow the button size (14 / 16 / 18px).

• rightIcon
  ReactNode

  An icon after the label, like an arrow or a chevron.

• spinner
  ReactNode

  Replaces the default spinner.

• typedefault "button"
  "button" | "submit" | "reset"

  Defaults to "button" so a button inside a form never submits by accident. Set "submit" for the form's main action.

• onClick
  (event: MouseEvent<HTMLButtonElement>) => void

  Not called while loading or disabled.

• classNames
  Partial<Record<"content" | "icon" | "spinner", string>>

  Extra classes for the inner parts: the label wrapper, each icon wrapper, the spinner.

• className
  string

  Extra classes for the button itself, merged last. Override the tone vars here, e.g. [--tone-foreground:white].

FAQ

Used in

More React button components