Reactolith UI Getting Started Introduction Installation Usage Layout Aspect Ratio Card Resizable Scroll Area Separator Direction Provider Forms Button Button Group Calendar Checkbox Combobox Field Input Input Group Input OTP Label Native Select Radio Group Select Slider Switch Textarea Toggle Toggle Group Data Display Accordion Avatar Badge Carousel Chart Collapsible Item Kbd Table Feedback Alert Empty Progress Skeleton Sonner Spinner Overlay Alert Dialog Context Menu Dialog Dropdown Menu Hover Card Popover Sheet Tooltip Navigation Breadcrumb Command Menubar Navigation Menu Pagination Sidebar Tabs
shadcn/ui docs

Button

Displays a button or a component that looks like a button.

Preview

Variants

Default Secondary Outline Ghost Destructive Link

Sizes

Extra Small Small Default Large

States

Enabled Disabled As Link

Usage

<div class="space-y-6">
  <div>
    <p class="text-sm font-medium text-muted-foreground mb-3">Variants</p>
    <div class="flex flex-wrap items-center gap-3">
      <ui-button variant="default">Default</ui-button>
      <ui-button variant="secondary">Secondary</ui-button>
      <ui-button variant="outline">Outline</ui-button>
      <ui-button variant="ghost">Ghost</ui-button>
      <ui-button variant="destructive">Destructive</ui-button>
      <ui-button variant="link">Link</ui-button>
    </div>
  </div>
  <div>
    <p class="text-sm font-medium text-muted-foreground mb-3">Sizes</p>
    <div class="flex flex-wrap items-center gap-3">
      <ui-button size="xs">Extra Small</ui-button>
      <ui-button size="sm">Small</ui-button>
      <ui-button size="default">Default</ui-button>
      <ui-button size="lg">Large</ui-button>
    </div>
  </div>
  <div>
    <p class="text-sm font-medium text-muted-foreground mb-3">States</p>
    <div class="flex flex-wrap items-center gap-3">
      <ui-button>Enabled</ui-button>
      <ui-button disabled>Disabled</ui-button>
      <ui-button href="https://github.com/reactolith/ui">As Link</ui-button>
    </div>
  </div>
</div>

Sub-components

<ui-button>

Props

<ui-button> Custom wrapper

PropTypeDefaultDescription
variant"default" | "outline" | "secondary" | "ghost" | "destructive" | "link""default"The visual style variant.
size"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg""default"The size of the button.
disabledbooleanfalseWhether the button is disabled.
hrefstring—When provided, renders the button as an anchor tag. (Custom prop)

All components also accept standard HTML attributes (class, id, style, data-*, aria-*, etc.) which are passed through to the underlying element.