Button

Installation

npx shadcn@latest add button

<Step>Install the following dependencies:</Step>

npm install @base-ui/react

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="button" title="components/ui/button.tsx" styleName="base-nova" />

<Step>Update the import paths to match your project setup.</Step>

Usage

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

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

Cursor

Tailwind v4 switched from cursor: pointer to cursor: default for the button component.

If you want to keep the cursor: pointer behavior, add the following code to your CSS file:

@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

Examples

Size

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

Default

Outline

Secondary

Ghost

Destructive

Link

Icon

With Icon

Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the icon for the correct spacing.

Rounded

Use the rounded-full class to make the button rounded.

Spinner

Render a <Spinner /> component inside the button to show a loading state. Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the spinner for the correct spacing.

Button Group

To create a button group, use the ButtonGroup component. See the Button Group documentation for more details.

As Link

You can use the buttonVariants helper to make a link look like a button.

Do not use <Button render={<a />} nativeButton={false} /> for links. The Base UI Button component always applies role="button", which overrides the semantic link role on <a> elements. Use buttonVariants with a plain <a> tag instead.

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

API Reference

Button

The Button component is a wrapper around the button element that adds a variety of styles and functionality.