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

Button

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

Installation


npm install @strongtie/design-system

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

Props

`<Button>`

Prop	Type	Default	Description
`size`	`"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg" \| null`	-
`variant`	`"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link" \| null`	-

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.

Classes

CSS classes used by this component:

button

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Button Group Calendar

On This Page

Example Installation Props <Button>Examples As Child Disabled Loading Sizes Variants With Icon Styling Classes Accessibility

Contribute