BONES Design System

{
  "name": "Button",
  "category": "Action",
  "description": "The system's one interactive control. Square, bevelled, uppercase. Renders as an anchor when `href` is set, a native button otherwise.",
  "keywords": [
    "button",
    "cta",
    "action",
    "link",
    "submit"
  ],
  "usage": {
    "description": "Use Button for the actions a view offers — submitting a form, sending a message, moving to the next project. Reach for the accent variant only for the single most important action on the screen; everything else is solid, outline, or ghost by descending emphasis.",
    "bestPractices": [
      {
        "guidance": true,
        "description": "Reserve the accent variant for the one primary action in a view."
      },
      {
        "guidance": true,
        "description": "Write labels that name the action (\"See the work\", \"Get in touch\"), not \"Click here\"."
      },
      {
        "guidance": true,
        "description": "Set `href` when the control navigates — it renders a real <a> with correct semantics."
      },
      {
        "guidance": false,
        "description": "Stack two accent buttons side by side; it flattens the hierarchy."
      },
      {
        "guidance": false,
        "description": "Round the corners or add a shadow — the button is square, and its depth is the bevel."
      }
    ],
    "anatomy": [
      {
        "name": "Label",
        "required": true,
        "description": "The visible text; also the accessible name."
      },
      {
        "name": "Icon / glyph",
        "required": false,
        "description": "An optional leading or trailing mark passed as children (e.g. an arrow)."
      }
    ]
  },
  "props": [
    {
      "name": "variant",
      "type": "'solid' | 'accent' | 'outline' | 'ghost'",
      "description": "Visual weight. solid is the standard push button; accent fills with the selection colour; outline is a thin-bevelled toolbar button; ghost is flat until hover.",
      "default": "'solid'"
    },
    {
      "name": "size",
      "type": "'sm' | 'md'",
      "description": "Padding and type scale.",
      "default": "'md'"
    },
    {
      "name": "href",
      "type": "string",
      "description": "When provided, renders an <a> instead of a <button>."
    },
    {
      "name": "disabled",
      "type": "boolean",
      "description": "Disables the native button.",
      "default": "false"
    },
    {
      "name": "children",
      "type": "ReactNode",
      "description": "Button label.",
      "required": true
    }
  ],
  "examples": [
    {
      "label": "Primary",
      "code": "<Button>See the work</Button>"
    },
    {
      "label": "Accent",
      "code": "<Button variant=\"accent\">Get in touch</Button>"
    },
    {
      "label": "Outline, small",
      "code": "<Button variant=\"outline\" size=\"sm\">Résumé ↓</Button>"
    },
    {
      "label": "As link",
      "code": "<Button variant=\"ghost\" href=\"/work/\">All work →</Button>"
    }
  ],
  "accessibility": [
    "Renders a native <button> or <a> — full keyboard and screen-reader support for free.",
    "Focus draws the skin-bound outline — the PC dotted rectangle, the Mac solid ring — inside the button edge, so it never disturbs the bevel.",
    "Disabled state sets the native disabled attribute, not just styling."
  ],
  "theming": {
    "vars": [
      {
        "name": "--color-accent",
        "description": "Fill of the accent variant and the solid hover.",
        "default": "#000080"
      },
      {
        "name": "--color-fg",
        "description": "Fill of the solid variant; text of outline/ghost.",
        "default": "#000000"
      },
      {
        "name": "--duration-fast",
        "description": "Speed of the colour transition on hover/focus.",
        "default": "150ms"
      }
    ]
  }
}