# Button

Action trigger with variant, size, and shape options. Shares its styling with LinkButton.

**Install:** `nimbus-docs add button`  
**Source:** `src/components/ui/button/`  
**Canonical:** https://docs.klounge.kr/components/button/

## Agent payload (JSON)

```json
{
  "slug": "button",
  "name": "Button",
  "description": "Action trigger with variant/size/shape options. Owns the shared button/variants styling that LinkButton reuses.",
  "tagline": "Action trigger with variant, size, and shape options. Shares its styling with LinkButton.",
  "install": "nimbus-docs add button",
  "sourcePath": "src/components/ui/button/",
  "canonicalUrl": "https://docs.klounge.kr/components/button/",
  "props": [
    {
      "name": "variant",
      "type": "\"primary\" | \"secondary\" | \"ghost\" | \"destructive\" | \"secondary-destructive\" | \"outline\"",
      "defaultValue": "\"secondary\"",
      "required": false,
      "description": "Visual treatment."
    },
    {
      "name": "size",
      "type": "\"xs\" | \"sm\" | \"base\" | \"lg\"",
      "defaultValue": "\"base\"",
      "required": false,
      "description": "Relative scale; affects padding and font size."
    },
    {
      "name": "shape",
      "type": "\"base\" | \"square\" | \"circle\"",
      "defaultValue": "\"base\"",
      "required": false,
      "description": "Use \"square\" or \"circle\" for icon-only buttons (pass an aria-label)."
    },
    {
      "name": "icon",
      "type": "string",
      "required": false,
      "description": "Iconify name rendered before the label, e.g. \"ph:plus\"."
    },
    {
      "name": "loading",
      "type": "boolean",
      "defaultValue": "false",
      "required": false,
      "description": "Show a spinner and disable interaction."
    }
  ],
  "registryDependencies": [
    "cn"
  ],
  "dependencies": []
}
```