Button

Base interactive button with sharp edges, slant variant, and hard-shadow styling.

Installation

npx shadcn@latest add @gameone/button

Registry dependencies: gameone-utils

Usage

Import

import { Button } from "@/components/ui/button"

Example

<Button variant="default">Click me</Button>

Examples

Default

import { Button } from "@/components/ui/button"

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

Secondary

import { Button } from "@/components/ui/button"

export function ButtonSecondary() {
  return <Button variant="secondary">Secondary</Button>
}

Outline

import { Button } from "@/components/ui/button"

export function ButtonOutline() {
  return <Button variant="outline">Outline</Button>
}

Ghost

import { Button } from "@/components/ui/button"

export function ButtonGhost() {
  return <Button variant="ghost">Ghost</Button>
}

Destructive

import { Button } from "@/components/ui/button"

export function ButtonDestructive() {
  return <Button variant="destructive">Destructive</Button>
}

Link

import { Button } from "@/components/ui/button"

export function ButtonLink() {
  return <Button variant="link">Link</Button>
}

Slant

import { Button } from "@/components/ui/button"

export function ButtonSlant() {
  return <Button variant="slant">Slant</Button>
}

Sizes

import { Button } from "@/components/ui/button"

export function ButtonSizes() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button size="xs">Extra Small</Button>
      <Button size="sm">Small</Button>
      <Button size="default">Default</Button>
      <Button size="lg">Large</Button>
    </div>
  )
}

With Icons

Buttons support inline leading and trailing icons alongside text labels.

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { fass } from "@/lib/fontawesome-kit"
import { Button } from "@/components/ui/button"

export function ButtonWithIcons() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button>
        <FontAwesomeIcon icon={fass.faArrowLeft} data-icon="inline-start" className="size-4" />
        Back
      </Button>
      <Button variant="secondary">
        Continue
        <FontAwesomeIcon icon={fass.faArrowRight} data-icon="inline-end" className="size-4" />
      </Button>
    </div>
  )
}

Icon Button Sizes

Square icon-only buttons are available in extra-small, small, default, and large sizes.

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { fass } from "@/lib/fontawesome-kit"
import { Button } from "@/components/ui/button"

export function ButtonIconSizes() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button size="icon-xs" aria-label="Favorite">
        <FontAwesomeIcon icon={fass.faStar} className="size-3" />
      </Button>
      <Button size="icon-sm" aria-label="Favorite">
        <FontAwesomeIcon icon={fass.faStar} className="size-3.5" />
      </Button>
      <Button size="icon" aria-label="Favorite">
        <FontAwesomeIcon icon={fass.faStar} className="size-4" />
      </Button>
      <Button size="icon-lg" aria-label="Favorite">
        <FontAwesomeIcon icon={fass.faStar} className="size-5" />
      </Button>
    </div>
  )
}

Badge