Strongtie Design System
Getting StartedComponents

Command Palette

Search for a command to run...

Getting Started
  • Introduction
  • Setup Guide
  • Package Installation
  • Code Quality Setup
  • Migration Guide
  • Resources
Registry
  • Getting Started
  • Combobox
  • Datepicker
  • MultiSelect
  • Tree
Guides
  • Framework Recommendations
Foundations
  • States
  • Variables
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Collapsible
  • Command
  • Combobox
  • Context Menu
  • Date Picker
  • Dialog
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • Hover Card
  • Input
  • Input Group
  • Item
  • Kbd
  • Label
  • Menubar
  • Multi Select
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Switch
  • Table
  • Tabs
  • Textarea
  • Toaster
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree
2026 Simpson Strong-Tie
  1. Docs
  3. Components
  5. Button

Button

PreviousNext

Button is a clickable interactive element that triggers actions or navigates within an application.

Buttons are fundamental UI components used to initiate actions, submit forms, or navigate to different views. They come in various visual styles (variants) to indicate importance and different sizes to accommodate various layouts. Buttons support full keyboard navigation and accessibility features, including proper focus management and ARIA attributes.

The component supports rendering as a child element via the asChild prop, allowing you to apply button styling to links, custom components, or other interactive elements while maintaining proper semantics. Use buttons for primary actions, secondary actions, destructive operations, or as simple text links depending on the visual hierarchy needs of your interface.

Example

"use client"

import { Button } from "@strongtie/design-system/button"

export function ButtonDefault() {
  return <Button>Click me</Button>
}

Installation

npm install @strongtie/design-system
import { Button } from "@strongtie/design-system/button"

Props

<Button>

PropTypeDefaultDescription
size"default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null-
variant"link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null-

Examples

"use client"

import { Button } from "@strongtie/design-system/button"

export function ButtonDefault() {
  return <Button>Click me</Button>
}

As Child

Visit GitHub
"use client"

import { Button } from "@strongtie/design-system/button"

export function ButtonAsChild() {
  return (
    <Button asChild>
      <a href="https://github.com" target="_blank" rel="noopener noreferrer">
        Visit GitHub
      </a>
    </Button>
  )
}

Disabled

"use client"

import { Button } from "@strongtie/design-system/button"

export function ButtonDisabled() {
  return (
    <div className="flex flex-wrap gap-4">
      <Button disabled>Default</Button>
      <Button disabled variant="secondary">
        Secondary
      </Button>
      <Button disabled variant="outline">
        Outline
      </Button>
      <Button disabled variant="ghost">
        Ghost
      </Button>
      <Button disabled variant="destructive">
        Destructive
      </Button>
      <Button disabled variant="link">
        Link
      </Button>
    </div>
  )
}

Loading

"use client"

import { Button } from "@strongtie/design-system/button"
import { MdOutlineRefresh } from "react-icons/md"

export function ButtonLoading() {
  return (
    <Button disabled>
      <MdOutlineRefresh className="mr-2 h-4 w-4 animate-spin" />
      Please wait
    </Button>
  )
}

Sizes

"use client"

import { Button } from "@strongtie/design-system/button"

export function ButtonSizes() {
  return (
    <div className="flex items-center gap-4">
      <Button size="sm">Small</Button>
      <Button size="default">Default</Button>
      <Button size="lg">Large</Button>
      <Button size="icon">
        <span>+</span>
      </Button>
    </div>
  )
}

Variants

"use client"

import { Button } from "@strongtie/design-system/button"

export function ButtonVariants() {
  return (
    <div className="flex gap-4">
      <Button variant="default">Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="link">Link</Button>
    </div>
  )
}

With Icon

"use client"

import { Button } from "@strongtie/design-system/button"
import { MdChevronRight, MdRefresh } from "react-icons/md"

export function ButtonWithIcon() {
  return (
    <div className="flex gap-4">
      <Button>
        <MdRefresh className="mr-2" />
        Refresh
      </Button>
      <Button variant="outline">
        Continue
        <MdChevronRight className="ml-2" />
      </Button>
      <Button size="icon">
        <MdRefresh />
      </Button>
    </div>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

  • button

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Button GroupCalendar

On This Page

ExampleInstallationProps<Button>ExamplesAs ChildDisabledLoadingSizesVariantsWith IconStylingClassesAccessibility

Contribute

  • Report an issue
  • Request a feature
  • Edit this page