button

Installation

Import Button from `@/components/kamod-ui/button`. Use variant and size props; optional asChild to merge styles onto a child element (for example an anchor).

pnpm add @kamod-ch/ui

import { Button } from "@/components/kamod-ui/button";

<Button variant="outline">Button</Button>

Usage

Primary actions with variants and sizes; icons via data-icon; asChild for links; pairs with ButtonGroup and Spinner (shadcn Button pattern).

import { Button } from "@/components/kamod-ui/button"
import { Spinner } from "@/components/kamod-ui/spinner";

<Button disabled>
  <Spinner size="sm" data-icon="inline-start" />
  Generating
</Button>

Cursor

Tailwind v4 defaults buttons to cursor: default. Kamod Button sets cursor-pointer (and disabled:cursor-not-allowed). If you use native buttons outside this component, you can mirror shadcn’s base layer snippet:

@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

Size

Use the size prop to change height and padding. Icon sizes pair with text sizes (xs → icon-xs, and so on). Kamod also supports size="xxs" for ultra-compact UI (not shown in the grid below).

Default

Primary emphasis — default variant.

Outline

Bordered surface; works well in dense toolbars.

Secondary

Supporting actions with muted fill.

Inverse

High-contrast filled control using foreground on background (for example Cursor marketing dark CTA in light mode; flips in dark mode).

Ghost

Minimal chrome until hover.

Destructive

Dangerous or irreversible actions.

Link

Underline-style control while keeping button semantics.

Icon

Icon-only control; always set aria-label.

With icon

Add data-icon="inline-start" or data-icon="inline-end" on the icon so horizontal padding stays balanced.

Rounded

Use rounded-full (or other radius utilities) for pill or circular buttons.

Spinner

Show loading state with Spinner plus data-icon placement (start vs end).

Button group

Group related actions with ButtonGroup for shared borders and spacing. See the Button Group page for nested groups, separators, and dropdown patterns.

As child

Merge button styles onto another element — common for links that should look like buttons.

Login

API Reference

Button props and accepted values.

Wrapper around button (or anchor with href) that applies variant and size tokens.

Prop	Type	Default
variant	`"default" \| "outline" \| "ghost" \| "destructive" \| "secondary" \| "inverse" \| "link"`	`"default"`
size	`"default" \| "xxs" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"`	`"default"`
asChild	`boolean`	`false`

Accessibility Notes

Use Button with clear labels, keyboard-friendly interactions and semantic structure.