BONES DesignSystem

{
  "name": "Button",
  "category": "Action",
  "description": "The system's one interactive control: square, framed in ink, and filled with the lime highlight on hover. Renders a Next.js link for an internal `href`, an anchor for any other `href`, and a native button otherwise.",
  "keywords": [
    "button",
    "cta",
    "action",
    "link",
    "submit"
  ],
  "usage": {
    "description": "Use Button for every action a view offers — opening a case study, sending an email, submitting a form, flipping the theme. `outline` (paper fill, ink frame) is the house button on the manga pages; `accent` is a solid ink fill for the single most important action on a screen. Every variant shares one hover, the lime highlight, so an action is the one thing on the page that lights up.",
    "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": "Hand-roll a button with its own border and hover. Use Button, so every action shares the one lime hover."
      },
      {
        "guidance": false,
        "description": "Use the lime highlight at rest. It is the hover state; a lime button at rest stops meaning \"you can press this\"."
      }
    ],
    "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, descending. accent is a solid ink fill (solid is an alias for it); outline is paper with an ink frame; ghost is flat until hover. All of them hover to the lime highlight.",
      "default": "'accent'"
    },
    {
      "name": "size",
      "type": "'sm' | 'md' | 'lg'",
      "description": "Padding and type scale. lg is for a single headline action, like the contact email.",
      "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": "Case-study link",
      "code": "<Button variant=\"outline\" href=\"/work/spabreaks/\">Read the case study →</Button>"
    },
    {
      "label": "Headline action",
      "code": "<Button variant=\"outline\" size=\"lg\" href=\"mailto:…\">Email me →</Button>"
    },
    {
      "label": "Ghost",
      "code": "<Button variant=\"ghost\" size=\"sm\">Dismiss</Button>"
    }
  ],
  "accessibility": [
    "Renders a native <button> or <a> — full keyboard and screen-reader support for free.",
    "Focus draws the brand-bound outline inside the button edge, so it never shifts the layout or clips against a neighbour.",
    "The lime hover carries ink type at 17:1, in both themes and inside `.inverted`.",
    "Disabled state sets the native disabled attribute, not just styling."
  ],
  "theming": {
    "vars": [
      {
        "name": "--color-highlight",
        "description": "The hover fill of every variant. Lime in every theme.",
        "default": "#d0fe91"
      },
      {
        "name": "--color-on-highlight",
        "description": "Type on the hover fill. Always ink.",
        "default": "#0a0a0a"
      },
      {
        "name": "--color-accent",
        "description": "Fill of the accent/solid variant. Re-bound by .inverted.",
        "default": "#0a0a0a"
      },
      {
        "name": "--color-ink",
        "description": "The frame of accent/solid/outline. Re-bound by .inverted.",
        "default": "#0a0a0a"
      },
      {
        "name": "--duration-fast",
        "description": "Speed of the colour transition on hover/focus.",
        "default": "120ms"
      }
    ]
  }
}