Button

Component button-demo not found in registry.

Installation

pnpmnpmyarnbun
pnpm dlx createui@latest add button
Copy

Usage

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

Copy<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:

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

Examples

Size

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

Component button-size not found in registry.

Default

Component button-default not found in registry.

Outline

Component button-outline not found in registry.

Secondary

Component button-secondary not found in registry.

Ghost

Component button-ghost not found in registry.

Destructive

Component button-destructive not found in registry.

Link

Component button-link not found in registry.

Icon

Component button-icon not found in registry.

With Icon

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

Component button-with-icon not found in registry.

Rounded

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

Component button-rounded not found in registry.

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.

Component button-spinner not found in registry.

Button Group

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

Component button-group-demo not found in registry.

Link

You can use the asChild prop on <Button /> to make another component look like a button. Here's an example of a link that looks like a button.

Component button-aschild not found in registry.

API Reference

Button

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