Button

A button component built on Base UI's Button primitive with multiple variants and sizes. Supports rendering as any element via the render prop for composability with links and other components.

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

export default function ButtonDemo() {
  return <Button>Button</Button>
}

Anatomy

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

<Button variant="default" size="default">
  Click me
</Button>

Examples

Variants

Use the variant prop to change the visual style of the button.

<Button variant="default">Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

Sizes

Use the size prop to change the size of the button.

<Button size="xs">Extra small</Button>
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>

Icon buttons

Use the icon sizes for buttons that only contain an icon.

<Button variant="outline" size="icon-xs">
  <PlusIcon />
</Button>
<Button variant="outline" size="icon-sm">
  <PlusIcon />
</Button>
<Button variant="outline" size="icon">
  <PlusIcon />
</Button>
<Button variant="outline" size="icon-lg">
  <PlusIcon />
</Button>

With icons

Place icons before or after the label. Icons inside the button are automatically sized to 16px unless a custom size-* class is applied.

<Button>
  <MailIcon />
  Send email
</Button>

<Button variant="outline">
  Settings
  <ChevronRightIcon />
</Button>

As a link

Use the render prop to render the button as a different element, such as a Next.js Link. Set nativeButton={false} to avoid wrapping the link in a <button> element.

<Button render={<Link href="/docs" />} nativeButton={false}>
  Go to docs
</Button>

Disabled

<Button disabled>Disabled</Button>

API Reference

Button

The button component. Built on Base UI's Button primitive.

Prop	Type	Default	Description
`variant`	`"default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| "link"`	`"default"`	The visual style of the button.
`size`	`"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"`	`"default"`	The size of the button.
`render`	`ReactElement`	—	Render the button as a different element. Useful for wrapping links or custom components.
`nativeButton`	`boolean`	`true`	When `false`, does not wrap the rendered element in a native `<button>`. Set to `false` when using `render` with a `<Link>`.
`disabled`	`boolean`	`false`	Disables the button.
`className`	`string`	—
`children`	`ReactNode`	—