Button

Triggers an action or event. Supports multiple variants and sizes to adapt to different contexts and hierarchies.

Code

Installation

npx shadcn@latest add https://yourdomain.com/r/button.json

Basic Example

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

<Button>Click me</Button>

Variants

<Button variant="default">Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>

With Icons

import { Icon } from "@/components/ui/icon"
import { IconHeartFilled } from "@tabler/icons-react"

<Button>
  <Icon icon={IconHeartFilled} />
  Like
</Button>

Reference

Props

Prop	Type	Default	Description
variant	string	"default"	Visual style variant. Options: default, secondary, destructive, success, outline, ghost, link
size	string	"default"	Size of the button. Options: sm, default, lg, icon
asChild	boolean	false	When true, merges props with child component
...props	ButtonHTMLAttributes	—	All standard button HTML attributes

All Variants

Sizes

Icon-only

States

CSS Classes

// Uses class-variance-authority (CVA)
// Base classes: inline-flex items-center justify-center gap-2 
// whitespace-nowrap rounded-[12px] text-body-md transition-colors

buttonVariants({
  variant: "default", // or "secondary", "destructive", etc.
  size: "default"    // or "sm", "lg", "icon"
})

Usage Guidelines

When to Use

Use buttons for primary actions that require user interaction, such as submitting forms, confirming actions, or triggering important workflows.

Choose the variant based on the action's importance: use "default" for primary actions, "secondary" for supporting actions, and "destructive" for potentially harmful actions.

Avoid using buttons for navigation—use links instead. Buttons should trigger actions, not navigate to different pages.

Best Practices

Use the primary variant for the most important action on a page
Limit to one primary button per view or section
Ensure button labels are clear and action-oriented
Use appropriate sizes: default for most cases, lg for prominent CTAs, sm for compact spaces
Provide visual feedback for loading states when actions take time
Always include disabled states for unavailable actions

Accessibility

Buttons are fully keyboard accessible and can be activated with Enter or Space keys. Focus states are included with visible ring indicators.

Ensure button labels are descriptive and indicate the action that will occur. For icon-only buttons, provide an aria-label or aria-labelledby attribute.

Disabled buttons are automatically not focusable and have reduced opacity to indicate their unavailable state.

Rhetoric-ds