Button

// Primary
<Button variant="primary">Primary</Button>
 
// Secondary
<Button variant="secondary">Secondary</Button>
 
// Outline
<Button variant="outline">Outline</Button>
 
// Destructive
<Button variant="destructive">Destructive</Button>
 
// Disabled
<Button disabled>Disabled</Button>
 
// Form Submit
<Button type="submit">Submit</Button>
 
// Icon
<Button variant="outline" class="p-2.5">
  <Copy />
</Button>
 
// Text + Icon
<Button variant="primary" class="gap-2">
  Like
  <ThumbsUp />
</Button>
 
// Custom
<Button
  variant="outline"
  class="rounded-full border border-primary font-bold text-primary italic"
>
  Custom
</Button>

import type { JSX, Child } from "hono/jsx";
import { c } from "./c";
 
export function Button({
  type = "button",
  variant = "primary",
  class: custom,
  children,
  ...props
}: JSX.IntrinsicElements["button"] & {
  variant?: "primary" | "secondary" | "outline" | "destructive";
  children?: Child;
}) {
  return (
    <button
      type={type}
      class={c(
        "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md px-3 py-2 text-sm font-medium whitespace-nowrap transition select-none hover:opacity-80 active:opacity-70 disabled:cursor-not-allowed disabled:opacity-50",
        {
          "bg-primary text-primary-foreground": variant === "primary",
          "bg-secondary text-secondary-foreground": variant === "secondary",
          "border border-border hover:bg-accent": variant === "outline",
          "bg-destructive/25 text-destructive": variant === "destructive",
        },
        custom,
      )}
      {...props}
    >
      {children}
    </button>
  );
}