Button

Browse 23 button patterns built on Base UI. Copy any of them into your project as source you own.

Installation

You can add this pattern using our CLI or manually:

Adds the pattern's files to your project and installs the packages it uses.

npx gaudi-ui@latest add button-default

First time in this project? Run gaudi-ui init once, or configure your paths for a monorepo or custom aliases.

Variants

import { Button } from '@base-ui/react/button';

export default function ButtonDefault() {
  return (
    <Button
      data-slot="button"
      className="group/button inline-flex h-8 shrink-0 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-primary bg-clip-padding px-2.5 text-sm font-medium whitespace-nowrap text-primary-foreground transition-all outline-none select-none hover:bg-primary/80 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
    >
      Default
    </Button>
  );
}

Sizes

Icons

Set data-icon="inline-start" or data-icon="inline-end" on the icon, and the button trims the padding on that side. Icons are aria-hidden, so screen readers announce only the label. An icon without a size-* class is size-4.

States

Disabled

A disabled button leaves the tab order. Add focusableWhenDisabled to keep it focusable, for example so a tooltip can explain why the action is unavailable. The disabled styles target data-disabled, which Base UI sets on every disabled button, so a button with focusableWhenDisabled still looks disabled.

Loading

While the action runs, the button is disabled and has aria-busy. It also has focusableWhenDisabled, so keyboard focus stays on the button while it's disabled and is still there when the action finishes.

Recipes

Cancel

Permissions

Copy

Multi-state send

Reveal

Like

Upvote

Animated border

Heartbeat

Base UI reference

Every pattern is built on Base UI’s Button.