{
  "name": "IconButton",
  "type": "component",
  "description": "A Button with leading and trailing icon slots, square when icon-only.",
  "export": "IconButton",
  "path": "@gtmi/strix-react/atoms/icon-button",
  "figma": null,
  "figmaAbsent": "Derived from `.button-main` geometry for the icon-only case Figma does not draw as its own component.",
  "props": [
    {
      "name": "iconLeft",
      "type": "ReactNode",
      "description": "Leading icon. Expects a 16x16 glyph, e.g. <ChevronLeftIcon size=\"sm\" />."
    },
    {
      "name": "iconRight",
      "type": "ReactNode",
      "description": "Trailing icon."
    },
    {
      "name": "variant",
      "type": "solid | outline | ghost | link",
      "default": "solid",
      "description": "Button's variant vocabulary, passed straight through."
    },
    {
      "name": "size",
      "type": "xs | sm | md | lg | xl",
      "default": "md",
      "description": "Button's size scale, passed straight through."
    },
    {
      "name": "render",
      "type": "ReactElement",
      "description": "Base UI render seam for element swapping, e.g. render={<a href=\"/x\" />}. Never asChild or as."
    },
    {
      "name": "aria-label",
      "type": "string",
      "description": "Required when there are no children, because the icon is then the only content. A development-only warning fires if it and aria-labelledby are both missing."
    },
    {
      "name": "className",
      "type": "string",
      "description": "Merged through cn()."
    }
  ],
  "ai_tags": ["icon-button", "button", "action", "primitive"],
  "since": "0.2.0",
  "tokens_used": [
    "--color-text-button-primary",
    "--color-text-button-secondary",
    "--color-text-button-secondary-hover",
    "--color-text-button-secondary-focused",
    "--color-text-button-secondary-pressed",
    "--color-text-button-secondary-disabled",
    "--color-text-button-tertiary",
    "--color-text-button-tertiary-hover",
    "--color-text-button-tertiary-focused",
    "--color-text-button-tertiary-pressed",
    "--color-text-button-tertiary-disabled",
    "--color-border-button-button-tertiary",
    "--spacing-gap-150",
    "--spacing-gap-200"
  ],
  "notes": "Speaks Button's variant and size vocabulary rather than maker-ds's primary/secondary/tertiary and small/medium/large, so two sibling components do not disagree about what a variant is called. Button's API won the reconciliation because it is the one already exposed to consumers, it carries the larger size scale, and `ghost` has no maker-ds equivalent to translate from - it is a secondary-ink button without the border, so it takes the same ink treatment as `outline`. `link` keeps the underline-on-hover label treatment maker-ds's `tertiary` had, and is excluded from the icon-only square sizing because it has no box to make square. Icon color follows the button's interaction state through a named group/icon, since the icon is a sibling of the label rather than a descendant of anything that changes color."
}