Button

since 1.0

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

Example

Variant

Size

Install

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

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Props

`<Button>`

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

Variants

size

defaultsmlgiconicon-smicon-lg

variant

linkdefaultdestructiveoutlinesecondaryghost

When not to use it

Don't use a button for navigation between pages — use a link styled as a button instead, so it stays keyboard- and assistive-technology-accessible and supports open-in-new-tab. Avoid stacking many high-emphasis buttons in one view; reserve the default variant for the single primary action and demote the rest to secondary, outline, or ghost.

Examples

As Child

Variant

Size

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

Variant

Size

"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

Variant

Size

"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

Variant

Size

"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

Variant

Size

"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

Variant

Size

"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>
  )
}

Button Group Calendar

On This Page

Example Install Props <Button>Variants When not to use it Examples As Child Disabled Loading Sizes Variants With Icon

Contribute

Button

since 1.0

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

Example

Variant

Size

Install

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

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Props

`<Button>`

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

Variants

size

defaultsmlgiconicon-smicon-lg

variant

linkdefaultdestructiveoutlinesecondaryghost

When not to use it

Examples

As Child

Variant

Size

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

Variant

Size

"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

Variant

Size

"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

Variant

Size

"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

Variant

Size

"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

Variant

Size

"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>
  )
}

Button Group Calendar

On This Page

Example Install Props <Button>Variants When not to use it Examples As Child Disabled Loading Sizes Variants With Icon

Contribute