Buttons

A customizable and interactive button component with a built-in ripple effect.

Basic Variants

Others

Action Buttons

Right Icon Buttons

Icon Only Buttons

E-commerce Buttons

Installation

npx shadcn@latest add button.json

Button Component

A customizable and interactive button component with a built-in ripple effect.

Installation & Import

First, make sure the Button component file is included in your project. Then, you can import it into your MDX or React files like this:

Basic Usage

Here's the most basic way to use the component:

Variants

The button comes in several variants to suit different UI contexts.

Default

The standard, primary button for your application.

Destructive

Use this for actions that could have destructive consequences, like deleting data.

Outline

A lower-emphasis button with a transparent background and a border.

Secondary

For actions that are secondary to the main call-to-action on a page.

Ghost

The lowest-emphasis button, used for supplemental actions that need to be available but not prominent.

Link

A button that looks and behaves like a hyperlink.

Sizes

The button is available in three sizes.

Loading State

You can put the button into a loading state, which disables it and shows a spinner. This is useful for indicating that an action (like a form submission) is in progress.

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'destructive' \| 'outline' \| 'secondary' \| 'ghost' \| 'link'`	`'default'`	The visual style of the button.
`size`	`'default' \| 'sm' \| 'lg'`	`'default'`	The size of the button.
`loading`	`boolean`	`false`	If `true`, the button will be disabled and show a loading spinner.
`...props`	`React.ButtonHTMLAttributes<HTMLButtonElement>`		Any other standard `button` attributes (e.g., `onClick`, `disabled`, `className`) will be passed through.