Button

The Button component is a versatile and customizable button that can be used for various actions in your application. It supports different variants, sizes, icons, and can be used as a link.

Installation

Import the component:

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

Basic Usage

Basic examples showing different button configurations including variants and icons.

Open Preview

Button Variants

Different visual styles to match your UI needs.

Open Preview

Button Sizes

The Button component comes in three sizes to suit different use cases.

Open Preview

Border Radius

Customize the button's border radius to match your design.

Open Preview

Loading State

Display a loading state while processing an action.

Open Preview

Props

Prop

Type

Default

Description

variant

'default' | 'secondary' | 'outline' | 'ghost' | 'link'

—

Visual style variant

size

'sm' | 'default' | 'lg'

—

Button size

rounded

'none' | 'sm' | 'full'

—

Border radius style

asChild

boolean

—

Render children directly using Radix UI Slot

icon

LucideIcon

—

Icon component to render

iconPosition

'left' | 'right'

—

Icon position

href

string

—

URL for link buttons

openInNewTab

boolean

—

Whether to open link in new tab

loading

boolean

—

Shows loading spinner

className

string

—

Additional CSS classes

childrenRequired

ReactNode

—

The content to display inside the button