Button

import { Button } from "sebs7n-ui/button"

function Variantes() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button>Guardar</Button>
      <Button variant="accent">Nueva factura</Button>
      <Button variant="outline">Exportar</Button>
      <Button variant="secondary">Duplicar</Button>
      <Button variant="ghost">Cancelar</Button>
      <Button variant="destructive">Eliminar</Button>
      <Button variant="link">Ver detalle</Button>
    </div>
  )
}

import { ArrowRightIcon, PlusIcon, TrashIcon } from "lucide-react"
import { Button } from "sebs7n-ui/button"

function Tamanos() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button size="sm">Pequeño</Button>
      <Button size="md">Mediano</Button>
      <Button size="lg">Grande</Button>
      <Button size="icon-sm" aria-label="Agregar">
        <PlusIcon />
      </Button>
      <Button size="icon-md" variant="outline" aria-label="Eliminar">
        <TrashIcon />
      </Button>
      <Button>
        Continuar <ArrowRightIcon />
      </Button>
    </div>
  )
}

import { Button } from "sebs7n-ui/button"
import { useState } from "react"

function Carga() {
  const [guardando, setGuardando] = useState(false)
  return (
    <Button
      loading={guardando}
      onClick={() => {
        setGuardando(true)
        setTimeout(() => setGuardando(false), 1600)
      }}
    >
      Guardar cambios
    </Button>
  )
}

import { Button } from "sebs7n-ui/button"

function Pildora() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button shape="pill" size="lg">
        Empezar gratis
      </Button>
      <Button shape="pill" size="lg" variant="outline">
        Hablar con ventas
      </Button>
    </div>
  )
}

import { buttonVariants } from "sebs7n-ui/variants/button"

function ComoLink() {
  return (
    <a className={buttonVariants({ variant: "accent" })} href="/docs/instalacion">
      Ir a la instalación
    </a>
  )
}