---
title: "Button"
description: "The primary action of the system. The theme decides the color; the button only declares a semantic variant and a size."
kind: component
id: C-001
registry: "button"
docs: "https://koten.codehive.com.co/components/button"
markdown: "https://koten.codehive.com.co/md/components/button.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/button.json"
language: en
---

# Button · ボタン

> Component C-001 in the Koten UI catalog.

The primary action of the system. The theme decides the color; the button only declares a semantic variant and a size.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/button.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/button.json
```

## Files

- `@/components/ui/button.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Examples

### Variants

Six semantic roles: secondary, primary, outline, ghost, danger and link.

```tsx
<Button>Secondary</Button>
<Button variant="primary">Primary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>
<Button variant="link">Link</Button>
```

### Sizes and states

Height comes from density; size adjusts text and padding.

```tsx
<Button size="xs" variant="primary">xs</Button>
<Button size="sm" variant="primary">sm</Button>
<Button size="md" variant="primary">md</Button>
<Button size="lg" variant="primary">lg</Button>
<Button variant="primary" loading>Saving</Button>
<Button variant="outline" disabled>Disabled</Button>
```

### Composition with render

For navigation use a link with buttonVariants or render; never a button that changes routes.

```tsx
<a className={buttonVariants({ variant: "secondary" })} href="/docs">
  Documentation
</a>
<Button render={<a href="/docs" />} nativeButton={false} variant="outline">
  Render composition
</Button>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `variant` | `primary \| secondary \| outline \| ghost \| danger \| link` | `secondary` | The color is decided by the theme, not the component. |
| `size` | `xs \| sm \| md \| lg` | `md` | Height comes from --koten-control-h; size adjusts text and padding. |
| `loading` | `boolean` | `false` | Adds a spinner, aria-busy and disabled. |
| `nativeButton` | `boolean` | `true` | Pass false when render draws a link or another element. |
| `render` | `ReactElement \| function` | `—` | Base UI composition, without asChild. |

## Accessibility

- The accessible name comes from visible content; for an icon-only button, aria-label is required.
- loading disables the button and announces aria-busy; it does not change the layout.
- For navigation use an <a> with buttonVariants, not a <button>.
- The visible focus uses the --koten-focus token with a 1 px offset.

## Sources

- Catalog page: https://koten.codehive.com.co/components/button
- Markdown: https://koten.codehive.com.co/md/components/button.md
- Repository: https://github.com/codehive-colombia/koten