Button

Powered by

Radix UIShadcn UI

Installation

Usage

The Button component supports multiple variants and sizes to fit different use cases in your application:

import { Button } from "@/components/redpanda-ui/button"

// Basic usage
<Button>Click me</Button>

// With variants
<Button variant="outline">Outline Button</Button>
<Button variant="destructive">Delete</Button>
<Button variant="ghost">Ghost Button</Button>

// With sizes
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>
<Button size="icon">
  <Plus className="h-4 w-4" />
</Button>

// Loading state
<Button disabled>
  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
  Loading...
</Button>

// As a link wrapper
<Button asChild>
  <Link href="/dashboard">Go to Dashboard</Link>
</Button>

When to use

Use this decision tree to determine when to use the Button component and which variant is most appropriate:

Variant Guidelines

• Default: Primary actions like "Submit", "Save", "Continue"
• Destructive: Actions that delete or remove data like "Delete", "Remove", "Cancel subscription"
• Outline: Secondary actions that need emphasis like "Edit", "Settings", "View details"
• Secondary: Alternative actions like "Cancel", "Back", "Skip"
• Secondary Outline: Outlined secondary actions with subtle emphasis like "Learn More", "View All"
• Ghost: Subtle actions in lists or cards like "More options", "Expand", navigation items
• Link: Actions that behave like links, typically for navigation
• Dashed: Placeholder or "add new" actions like "Add item", "Create new"

Link

You can use the buttonVariants helper to create a link that looks like a button.

import { buttonVariants } from "@/components/ui/button"

<Link className={buttonVariants({ variant: "outline" })}>Click here</Link>

Alternatively, you can set the asChild parameter and nest the link component from any router, including TanStack/React Router/Next.js/Remix paradigms.

<Button asChild>
  <Link href="/login">Login</Link>
</Button>

Anatomy

The Button component is built with composition in mind, using Radix UI's Slot primitive for flexibility:

Button Component Structure:
┌─────────────────────────────────────┐
│ Button Container                    │
│ ┌─────────────────────────────────┐ │
│ │ Slot/HTML button element        │ │
│ │ ┌─────────────────────────────┐ │ │
│ │ │ Content Area                │ │ │
│ │ │ [Icon] [Text] [Icon]        │ │ │
│ │ │                             │ │ │
│ │ │ - Icons: auto-sized (4×4)   │ │ │
│ │ │ - Text: inherits font style │ │ │
│ │ │ - Gap: 0.5rem between items │ │ │
│ │ └─────────────────────────────┘ │ │
│ └─────────────────────────────────┘ │
│                                     │
│ Properties:                         │
│ - variant: styling theme            │
│ - size: dimensions & padding        │
│ - asChild: render as child element  │
│ - disabled: interaction state       │
└─────────────────────────────────────┘

Component Composition

• Base: Uses either <button> element or Radix UI Slot for custom components
• Styling: CSS classes via class-variance-authority for consistent theming
• Accessibility: Built-in focus states, disabled states, and ARIA support
• Icons: Automatically sized and positioned with proper spacing
• Content: Flexible content area supporting text, icons, or custom elements

Examples

Primary

Secondary

Destructive

Outline

Ghost

Dashed

Link

Icon

With Icon

Loading

As Child

Router Integration

Credits

• We use Radix UI for the slot component.
• We take our inspiration from Shadcn UI for the button style.