# Button

The system’s action, as a pill that does not move on hover.

- Group: Actions
- Import: `import { Button } from '@misoto22/design'`
- Page: https://ui.misoto22.com/components/button/
- Related: floating-icon-button, spinner

## When to reach for it

Anything that DOES something. If it navigates and looks like text, it is a link, not a ghost button.

## Accessibility

- A native <button> by default, so Enter and Space both fire it.
- loading sets aria-busy and disables the control; the label stays, so the box does not collapse under the pointer that just clicked it.
- A link cannot be disabled, so href + loading sets aria-disabled and blocks pointer events instead.
- iconOnly has no text, so it requires aria-label — the single most common way a design system ships an unusable control.

## Keyboard

- Enter — Activates the button.
- Space — Activates the button. A native <button> answers to both; a styled <div> answers to neither.

## Button

The system's action. Renders a `<button>`, or an `<a>` when given `href`, or whatever you hand it via `asChild`. No router is imported, so the package stays framework-agnostic and a Next or React Router app wires its own `Link` at the call site. Server-component friendly: there is no client boundary here, so it renders in a static page as well as an interactive one.

### Props

- `children` — `ReactNode`.
- `variant` — `ButtonVariant` default `'primary'`. Which action this is. `primary` is the one thing the screen wants you to do, so there is at most one per view; `danger` is reserved for destructive actions and is the only place chroma is allowed on a control.
- `size` — `ButtonSize` default `'md'`. 36 / 44 / 48px tall. `md` meets the pointer-target floor on its own.
- `keycap` — `string`. Optional mono keycap glyph rendered after the label (e.g. "P").
- `loading` — `boolean` default `false`. Swaps the leading content for a spinner and blocks interaction. The label stays put — a button that empties out while it works loses its width, and the page reflows under the pointer that just clicked it.
- `iconOnly` — `boolean` default `false`. Square control with no label. REQUIRES `aria-label`: an icon-only button with no accessible name is invisible to a screen reader, and this is the single most common way a design system ships an unusable control.
- `asChild` — `boolean` default `false`. Render the child element instead of a `<button>`, keeping these styles. Use it to hand the styling to a router's `Link` — `asChild` is what keeps this package free of any one router. The decoration slots (`keycap`, `loading`) are not injected into a slotted child; compose them inside it yourself.
- `className` — `string`.
- `href` — `string`.

Also accepts: `AnchorHTMLAttributes<HTMLAnchorElement>`, `ButtonHTMLAttributes<HTMLButtonElement>`.

## Example — variants

```tsx
import { Button } from '@misoto22/design'

<div className="flex flex-wrap items-center gap-3">
  <Button>Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="ghost">Ghost</Button>
  <Button variant="danger">Delete</Button>
</div>
```

## Example — sizes

```tsx
import { Button } from '@misoto22/design'

<div className="flex flex-wrap items-center gap-3">
  <Button size="sm" variant="secondary">Small</Button>
  <Button size="md" variant="secondary">Medium</Button>
  <Button size="lg" variant="secondary">Large</Button>
</div>
```

## Example — states

```tsx
import { Button } from '@misoto22/design'

<div className="flex flex-wrap items-center gap-3">
  <Button loading>Saving…</Button>
  <Button disabled>Disabled</Button>
  <Button variant="secondary" keycap="P">View projects</Button>
</div>
```

## Example — icon only

```tsx
import { Button } from '@misoto22/design'

<div className="flex flex-wrap items-center gap-3">
  <Button iconOnly aria-label="Copy to clipboard" variant="secondary">
    <Copy size={16} strokeWidth={1.5} />
  </Button>
  <Button iconOnly aria-label="Share" variant="ghost">
    <Share2 size={16} strokeWidth={1.5} />
  </Button>
  <Button iconOnly aria-label="Open in a new tab">
    <ArrowUpRight size={16} strokeWidth={1.5} />
  </Button>
</div>
```