# Button

> The Kura button: six variants, four sizes, loading state, asChild, tactile press and a signal focus ring.

- **Slug:** `button` · **Category:** primitives · **Status:** stable
- **Import:** `import { Button, ButtonSize, ButtonVariant } from "@kura-ui/react/button";`
- **Docs:** https://kuro.abstergo.fyi/components/button
- **Registry item:** https://kuro.abstergo.fyi/r/button.json
- **Tags:** button, action, cta, submit, link, loading

## Install

```bash
# shadcn registry (copies source into your project)
npx shadcn@latest add https://kuro.abstergo.fyi/r/button.json
# Kura CLI (same, plus dependency resolution and --json output)
npx @kura-ui/cli add button
# npm package
npm install @kura-ui/react
```

## When to use

- Any clickable action: submit, confirm, cancel, open.
- Links that should look like buttons (use asChild with your router's Link).

## When not to use

- Icon-only actions — use icon-button (it enforces an accessible label and adds a tooltip).
- Approve/deny decisions for agent actions — use approval-prompt.

## Props

| Prop | Type | Default | Required | Description |
| --- | --- | --- | --- | --- |
| `variant` | `"primary" \| "secondary" \| "ghost" \| "outline" \| "accent" \| "danger"` | `"primary"` | no | primary = ink call to action; accent = the AI signal color (max one per view); danger = destructive. |
| `size` | `"xs" \| "sm" \| "md" \| "lg"` | `"md"` | no | Height 24 / 28 / 32 / 40px. |
| `loading` | `boolean` | `false` | no | Shows a spinner, sets aria-busy and disables the button while keeping its width. |
| `asChild` | `boolean` | `false` | no | Render the single child element (e.g. <a> or <Link>) with button styles. |

Native attributes of the root element, `className` and `ref` are passed through.

## Anatomy

- **buttonVariants** — Function returning the class string, for non-button elements.

## Accessibility

- Defaults to type="button" so it never submits forms by accident; pass type="submit" explicitly.
- Disabled and loading buttons use the native disabled attribute.
- Focus ring: 1px canvas gap + 2px signal ring, only on :focus-visible.
- Reduced motion: The 0.97 press scale is disabled; color transitions remain.

| Keys | Action |
| --- | --- |
| Enter / Space | Activate |
| Tab | Move focus |

## Notes for agents

- Use `accent` only for the single most AI-specific action in view (e.g. “Run agent”). Default to `primary`.
- Icons inside are auto-sized; do not add size classes unless you need a non-default size.

## Examples

### Primary (minimal)

```tsx
import { Button } from "@kura-ui/react/button";

export function ButtonMinimal() {
  return <Button>Continue</Button>;
}
```

### Variants, sizes, loading (full)

```tsx
import { Sparkles, Trash2 } from "lucide-react";
import { Button } from "@kura-ui/react/button";

export function ButtonFull() {
  return (
    <div className="flex flex-col items-center gap-4">
      <div className="flex flex-wrap items-center justify-center gap-2">
        <Button variant="primary">Primary</Button>
        <Button variant="secondary">Secondary</Button>
        <Button variant="outline">Outline</Button>
        <Button variant="ghost">Ghost</Button>
        <Button variant="accent">
          <Sparkles /> Run agent
        </Button>
        <Button variant="danger">
          <Trash2 /> Delete
        </Button>
      </div>
      <div className="flex flex-wrap items-center justify-center gap-2">
        <Button size="xs" variant="secondary">
          XS
        </Button>
        <Button size="sm" variant="secondary">
          Small
        </Button>
        <Button size="md" variant="secondary">
          Medium
        </Button>
        <Button size="lg" variant="secondary">
          Large
        </Button>
        <Button loading>Saving</Button>
        <Button disabled variant="secondary">
          Disabled
        </Button>
      </div>
    </div>
  );
}
```

### As a link (asChild) (composition)

```tsx
import { ArrowUpRight } from "lucide-react";
import { Button } from "@kura-ui/react/button";

export function ButtonAsLink() {
  return (
    <Button asChild variant="outline">
      <a href="https://github.com/Absterrg0/Kura-UI">
        View source <ArrowUpRight />
      </a>
    </Button>
  );
}
```

## Dependencies

- npm: `radix-ui`
- Kura registry items: `kura-theme`, `spinner`, `utils`
- Related: `icon-button`, `kbd-shortcut`, `tooltip`