Button

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @force-ui-ember/button
Copy

Usage#

Copyimport { Button } from '@/ui/button';

Copy<Button @variant="outline">Button</Button>
<Button @variant="outline" @size="icon" aria-label="Submit">
  <ArrowUpIcon />
</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:

You can also enable this during project setup with npx shadcn@latest init --pointer.

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.

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 Child#

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

API Reference#

Button#

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