🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Button

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.

Example

Installation


npm install @strongtie/design-system

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

Props

`<Button>`

Prop	Type	Default	Description
`size`	`default` \| `sm` \| `lg` \| `icon`	`'default'`	The size of the button, affecting padding and font size.
`variant`	`default` \| `destructive` \| `outline` \| `secondary` \| `ghost` \| `link`	`'default'`	The visual style variant of the button.

Examples

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.

Base Class

button

Variants

variant (default: default)

Value	Classes
`default`	`-default`
`destructive`	`-destructive`
`outline`	`-outline`
`secondary`	`-secondary`
`ghost`	`-ghost`
`link`	`-link`

size (default: default)

Value	Classes
`default`	`-md`
`sm`	`-sm`
`lg`	`-lg`
`icon`	`-icon`

Component Slots

The following data attributes are used to identify component parts:

button

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Breadcrumb Calendar

On This Page

Example Installation Props <Button>Examples As Child Disabled Loading Sizes Variants With Icon Styling Base Class Variants Component Slots Accessibility

Contribute

Button

A clickable interactive element that triggers actions or navigates within an application.

Example

Installation


npm install @strongtie/design-system

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

Props

`<Button>`

Prop	Type	Default	Description
`size`	`default` \| `sm` \| `lg` \| `icon`	`'default'`	The size of the button, affecting padding and font size.
`variant`	`default` \| `destructive` \| `outline` \| `secondary` \| `ghost` \| `link`	`'default'`	The visual style variant of the button.

Examples

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.

Base Class

button

Variants

variant (default: default)

Value	Classes
`default`	`-default`
`destructive`	`-destructive`
`outline`	`-outline`
`secondary`	`-secondary`
`ghost`	`-ghost`
`link`	`-link`

size (default: default)

Value	Classes
`default`	`-md`
`sm`	`-sm`
`lg`	`-lg`
`icon`	`-icon`

Component Slots

The following data attributes are used to identify component parts:

button

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Breadcrumb Calendar

On This Page

Example Installation Props <Button>Examples As Child Disabled Loading Sizes Variants With Icon Styling Base Class Variants Component Slots Accessibility

Contribute