Button

import { Button } from "@altech-ui/react"

<Button variant="default">Default</Button>
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>

<Button size="sm" variant="primary">Small</Button>
<Button size="md" variant="primary">Medium</Button>
<Button size="lg" variant="primary">Large</Button>

<Button variant="primary">Normal</Button>
<Button variant="primary" loading>Saving</Button>
<Button variant="primary" disabled>Disabled</Button>

<div className="inline-flex overflow-hidden rounded-xl border border-black/10">
  <Button variant="ghost" className="rounded-none border-r border-black/10">Day</Button>
  <Button variant="primary" className="rounded-none border-r border-black/10">Week</Button>
  <Button variant="ghost" className="rounded-none">Month</Button>
</div>

<div className="flex gap-3">
  <Button variant="ghost">Cancel</Button>
  <Button variant="secondary">Save Draft</Button>
  <Button variant="primary">Publish</Button>
</div>

<Button variant="outline" aria-label="Download" size="icon">
  <DownloadIcon />
</Button>
<Button variant="ghost" aria-label="Settings" size="icon">
  <SettingsIcon />
</Button>

<Button variant="primary">
  <PlusIcon />
  Add item
</Button>
 
<Button variant="secondary">
  Export
  <DownloadIcon />
</Button>

<Button variant="primary" fullWidth>Continue checkout</Button>
<Button variant="outline" fullWidth>Continue with Google</Button>

{items.map((item) => (
  <Button
    key={item.id}
    size="sm"
    variant="primary"
    loading={loadingId === item.id}
    onClick={() => handleGenerate(item.id)}
  >
    Generate
  </Button>
))}

<div className="inline-flex overflow-hidden rounded-xl border border-black/10">
  <Button variant="primary" className="rounded-none border-r border-black/10">Save</Button>
  <Button variant="primary" className="rounded-none px-3" aria-label="More actions">
    <ChevronDownIcon />
  </Button>
</div>

"use client"
 
import { useState } from "react"
import { Button } from "@altech-ui/react"
 
export function SaveButton() {
  const [saving, setSaving] = useState(false)
 
  const handleSave = async () => {
    setSaving(true)
    try {
      await fetch("/api/save", { method: "POST" })
    } finally {
      setSaving(false)
    }
  }
 
  return (
    <Button variant="primary" loading={saving} onClick={handleSave}>
      Save changes
    </Button>
  )
}