Buttons

Interactive elements that trigger actions when clicked or tapped.

Variants

Different button variants for various use cases and visual hierarchy.

Button Variants

States

Button states provide visual feedback for user interactions.

Interactive States

Default State

Disabled State

Loading State

Success State

Sizes

Multiple sizes to fit different contexts and layouts.

Size Comparison

size="sm"

default

size="lg"

size="icon"

Icon Buttons

With Icons

Buttons can include icons to enhance visual communication.

Icon Positions

Leading Icon

Trailing Icon

Button Groups

Combine buttons for related actions or toggle options.

Action Groups

Primary + Secondary

Destructive Action

Segmented Control

Real-world Examples

How buttons are used in common UI patterns.

Form Actions

Create Account

Password

Card Actions

Pro Plan

Upgrade to Pro

Get unlimited access to all features and priority support.

import { Button } from "@/components/ui/button" <Button variant="default"> Click me </Button> <Button variant="outline" size="sm"> Small Outline </Button> <Button disabled> Disabled </Button>