Button

Installation

Install the dependencies:

npm install @base-ui/react class-variance-authority

Copy the source into components/ui/button.tsx. Registry items that depend on it install it automatically.

components/ui/button.tsx

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

export function Example() {
  return <Button variant="outline">Read the docs</Button>;
}

The default height is 32px; sm is the 28px header control. xs and lg cover dense rails and prominent calls to action.

The square icon sizes pair with an aria-label; an icon placed next to a label gets its spacing automatically.

Extends the native button props through Base UI's useRender.

ButtonProps

variant : "default" | "outline" | "secondary" | "ghost" | "destructive" = "default": The visual weight of the button.
size : "xs" | "sm" | "default" | "lg" | "icon" | "icon-sm" | "icon-xs" = "default": Height and padding; the icon sizes render a square button.
render ?: ReactElement | function: Compose as a different element, like a link.
className ?: string: Additional CSS classes.

Export	Description
`buttonVariants`	Styles for the button component.

import { buttonVariants } from "@/components/ui/button";

<a className={buttonVariants({ variant: "outline", size: "sm" })}>
  Styled link
</a>