Strongtie Design System
Getting StartedComponents

Search documentation

Search for a command to run or a page to navigate to.

Getting Started
  • Introduction
  • Setup Guide
  • Package Installation
  • Styles Only (CSS)
  • Code Quality Setup
  • Resources
Guides
  • Framework Recommendations
  • Design Standards
  • Design Standards Examples
AI-Assisted Development
  • AI Agent Guide
  • AI Agent Skills
  • AGENTS.md Template
Registry
  • Getting Started
  • Combobox
  • Datepicker
  • MultiSelect
  • Tab Nav
  • Tree
Foundations
  • States
  • Variables
Migrations
  • Migration Guide
  • CDN Migration Guide
  • Telerik Migration
Governance
  • Governance Model
  • Contribution Model
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Collapsible
  • Combobox
  • Command
  • Context Menu
  • Date Picker
  • Dialog
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • Form
  • Hover Card
  • Input
  • Input Group
  • Input Otp
  • Item
  • Kbd
  • Label
  • Menubar
  • Multi Select
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Resizable
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Sonner
  • Spinner
  • Switch
  • Tab Nav
  • 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