Button

import { Button } from '@immit/ui/button'
 
export function ButtonVariants() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button variant="default">Default</Button>
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="success">Success</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </div>
  )
}

import { Button } from '@immit/ui/button'
 
export function ButtonSizes() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button size="sm">Small</Button>
      <Button size="default">Default</Button>
      <Button size="lg">Large</Button>
    </div>
  )
}

import { IconButton } from '@immit/ui/icon-button'
import { FileJson } from 'lucide-react'
 
export function IconButtons() {
  return (
    <div className="flex flex-wrap gap-2">
      <IconButton size="sm" aria-label="Small">
        <FileJson />
      </IconButton>
      <IconButton size="default" aria-label="Default">
        <FileJson />
      </IconButton>
      <IconButton size="lg" aria-label="Large">
        <FileJson />
      </IconButton>
    </div>
  )
}

import { Button } from '@immit/ui/button'
 
export function ButtonSpinning() {
  return (
    <div className="space-y-2">
      <div className="flex flex-wrap gap-2">
        <Button spinning size="sm" variant="default"></Button>
        <Button spinning size="sm" variant="primary"></Button>
        <Button spinning size="sm" variant="secondary"></Button>
        <Button spinning size="sm" variant="destructive"></Button>
        <Button spinning size="sm" variant="success"></Button>
        <Button spinning size="sm" variant="outline"></Button>
        <Button spinning size="sm" variant="ghost"></Button>
        <Button spinning size="sm" variant="link"></Button>
      </div>
      <div className="flex flex-wrap gap-2">
        <Button spinning variant="default"></Button>
        <Button spinning variant="primary"></Button>
        <Button spinning variant="secondary"></Button>
        <Button spinning variant="destructive"></Button>
        <Button spinning variant="success"></Button>
        <Button spinning variant="outline"></Button>
        <Button spinning variant="ghost"></Button>
        <Button spinning variant="link"></Button>
      </div>
      <div className="flex flex-wrap gap-2">
        <Button spinning size="lg" variant="default"></Button>
        <Button spinning size="lg" variant="primary"></Button>
        <Button spinning size="lg" variant="secondary"></Button>
        <Button spinning size="lg" variant="destructive"></Button>
        <Button spinning size="lg" variant="success"></Button>
        <Button spinning size="lg" variant="outline"></Button>
        <Button spinning size="lg" variant="ghost"></Button>
        <Button spinning size="lg" variant="link"></Button>
      </div>
    </div>
  )
}

import { Button } from '@immit/ui/button'
 
export function ButtonDisabled() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button disabled variant="default">
        Default
      </Button>
      <Button disabled variant="primary">
        Primary
      </Button>
      <Button disabled variant="secondary">
        Secondary
      </Button>
      <Button disabled variant="destructive">
        Destructive
      </Button>
      <Button disabled variant="success">
        Success
      </Button>
      <Button disabled variant="outline">
        Outline
      </Button>
      <Button disabled variant="ghost">
        Ghost
      </Button>
      <Button disabled variant="link">
        Link
      </Button>
    </div>
  )
}