Button

import { Button } from 'ferry-ui'

export default function ButtonHero() {
  return (
    <>
      <Button variant="primary">Save changes</Button>
      <Button>Cancel</Button>
    </>
  )
}

import { Button } from 'ferry-ui'

export default function ButtonVariants() {
  return (
    <>
      <Button>Default</Button>
      <Button variant="primary">Primary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="destructive-solid">Destructive solid</Button>
      <Button variant="warning">Warning</Button>
      <Button variant="link">Link</Button>
      <Button variant="dashed">Dashed</Button>
    </>
  )
}

import { Button } from 'ferry-ui'

export default function ButtonSizes() {
  return (
    <>
      <Button size="tiny">Tiny, 26px</Button>
      <Button size="sm">Small, 30px</Button>
      <Button size="md">Medium, 34px</Button>
      <Button size="lg">Large, 38px</Button>
    </>
  )
}

import { Button } from 'ferry-ui'
import { ArrowRight, Plus, Trash2 } from 'lucide-react'

export default function ButtonIcons() {
  return (
    <>
      <Button icon={<Plus />}>New project</Button>
      <Button iconRight={<ArrowRight />}>Continue</Button>
      <Button variant="ghost" size="icon" icon={<Trash2 />} aria-label="Delete the project" />
    </>
  )
}

import * as React from 'react'
import { Button } from 'ferry-ui'

export default function ButtonLoading() {
  const [saving, setSaving] = React.useState(false)

  function save() {
    setSaving(true)
    window.setTimeout(() => setSaving(false), 1500)
  }

  return (
    <Button variant="primary" loading={saving} onClick={save}>
      {saving ? 'Saving…' : 'Save changes'}
    </Button>
  )
}

import { Button } from 'ferry-ui'
import { ExternalLink } from 'lucide-react'

export default function ButtonAsChild() {
  return (
    <Button asChild iconRight={<ExternalLink />}>
      <a href="https://github.com/Carter2307/ferry-ui" target="_blank" rel="noreferrer">
        Open the repository
      </a>
    </Button>
  )
}