Button

Displays a button, or a component that looks like a button. Built on Base UI's button primitive.

Last updated January 1, 1980

Overview

Installation

$ pnpm dlx shadcn@latest add @persianlabsui/button

Usage

import { Button } from "@/components/ui/button"
 
export function Example() {
  return <Button variant="outline">Button</Button>
}

Examples

Sizes

Pass size to change the size of the button.

Outline

Secondary

Ghost

Destructive

Link

Blue

Icon

With icon

Add data-icon="inline-start" or data-icon="inline-end" to the icon for the correct spacing.

Rounded

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

Loading

Pass loading to show a spinner alongside the button's content and disable interaction. The spinner scales with the button's size.

As link

Use the buttonVariants helper to make a link look like a button. Base UI's Button always applies role="button", which overrides the semantic link role on <a> elements — use a plain <a> with buttonVariants instead.

Button Group

To create a button group, use the ButtonGroup component.

RTL

API Reference