{
  "title": "Icon button",
  "path": "/components/icon-button",
  "url": "https://design.werklist.com/components/icon-button",
  "text": "https://design.werklist.com/agent/components/icon-button",
  "summary": "An icon button shows a familiar glyph in place of words, for actions like closing a panel or copying a link.",
  "version": "2.1.2",
  "kind": "component",
  "name": "IconButton",
  "purpose": "A button that shows a familiar glyph in place of words, named by a required label.",
  "use": [
    "An action whose glyph people read at once: close, search, copy, download, more actions, menu, the theme switch.",
    "Toolbars, headers and table rows where words would crowd the space.",
    "Quiet by default. Secondary for an action that must be found without pointing, such as copy beside a field.",
    "Toggle: a quiet icon button with aria-pressed, such as a details panel shown or hidden.",
    "A row action: one small More actions button that opens the row menu."
  ],
  "avoid": [
    "A glyph people would have to guess: use a button with words.",
    "A destructive action as a glyph alone, or a red glyph: use a confirmation or Undo.",
    "A glyph with a visible text label next to it: use a button with an icon before its label.",
    "Changing the label when a toggle turns on.",
    "A native title attribute as the tooltip."
  ],
  "anatomy": [
    {
      "part": "Box",
      "measure": "32, 40 or 44 px square, radius 8 px",
      "token": "--radius-lg"
    },
    {
      "part": "Glyph",
      "measure": "16 px in the small box, 20 px in the medium and large boxes, stroke 1.75 on a 24 unit grid, currentColor, aria-hidden",
      "token": ""
    },
    {
      "part": "Space from glyph to edge",
      "measure": "8, 10 or 12 px",
      "token": ""
    },
    {
      "part": "Tooltip",
      "measure": "The label, 8 px below the box, after 500 ms of pointer rest or at once on keyboard focus, never on touch. Hidden from screen readers, which read aria-label.",
      "token": ""
    },
    {
      "part": "Focus ring",
      "measure": "outline 2 px, offset 2 px",
      "token": "--focus-ring, --focus-ring-width, --focus-ring-offset"
    },
    {
      "part": "Touch target",
      "measure": "44 px on coarse pointers. Neighbors keep their centers at least 44 px apart and their boxes at least 4 px apart",
      "token": ""
    },
    {
      "part": "Counter",
      "measure": "drawn by the Counter component at the top trailing corner, digits aria-hidden, the count joined to the name",
      "token": ""
    }
  ],
  "variants": [
    {
      "name": "quiet",
      "use": "The default: no fill until hover, glyph in muted ink. The only variant that toggles."
    },
    {
      "name": "secondary",
      "use": "A gray fill, for an action that must be visible without pointing."
    }
  ],
  "sizes": [
    {
      "name": "sm",
      "height": "32 px",
      "padding": "8 px around a 16 px glyph"
    },
    {
      "name": "md",
      "height": "40 px",
      "padding": "10 px around a 20 px glyph"
    },
    {
      "name": "lg",
      "height": "44 px",
      "padding": "12 px around a 20 px glyph"
    }
  ],
  "states": [
    {
      "name": "rest",
      "change": "Quiet: no fill, glyph in muted ink. Secondary: gray fill, glyph in text ink.",
      "tokens": [
        "--text-muted",
        "--surface-control",
        "--text"
      ]
    },
    {
      "name": "hover",
      "change": "The hover fill over the ground or the gray fill, glyph in text ink. Only on a pointer that can hover.",
      "tokens": [
        "--glass-fill-hover",
        "--text"
      ]
    },
    {
      "name": "pressed",
      "change": "The hover fill, on touch too, and a scale of 0.94 unless motion is reduced.",
      "tokens": [
        "--duration-fast",
        "--ease-standard"
      ]
    },
    {
      "name": "focus-visible",
      "change": "Outline 2 px at offset 2 px in the focus ring color, and the tooltip shows.",
      "tokens": [
        "--focus-ring",
        "--focus-ring-width",
        "--focus-ring-offset"
      ]
    },
    {
      "name": "disabled",
      "change": "aria-disabled true, focusable, presses canceled, drawn at opacity 0.5 in the colors of its variant.",
      "tokens": []
    },
    {
      "name": "toggle on",
      "change": "aria-pressed true: --seg-selected fill, glyph in text ink. On hover --glass-fill-hover lies over it.",
      "tokens": [
        "--seg-selected",
        "--text",
        "--glass-fill-hover"
      ]
    }
  ],
  "keys": [
    {
      "key": "Tab, Shift+Tab",
      "action": "Move focus in document order, disabled icon buttons included."
    },
    {
      "key": "Enter, Space",
      "action": "Press, or flip aria-pressed on a toggle."
    },
    {
      "key": "Down arrow, Up arrow",
      "action": "On an icon button with aria-haspopup menu, open the menu at its first or last item."
    }
  ],
  "accessibility": [
    "A native button whose accessible name is its label.",
    "The glyph is aria-hidden. No title attribute is added.",
    "Glyph on fill at 3 to 1 and focus ring at 3 to 1 in every enabled state and both themes.",
    "The name does not change with the toggle state. aria-pressed carries the state.",
    "Targets of 44 px on coarse pointers.",
    "Forced colors: the glyph takes ButtonText, the toggle on state Highlight, focus an outline in Highlight."
  ],
  "content": [
    "The label is a verb and its object: Close panel, Copy link, More actions.",
    "The tooltip repeats the label word for word.",
    "A count joins the name: Notifications, 3 unread."
  ],
  "tokens": [
    "--text",
    "--text-muted",
    "--surface-control",
    "--glass-fill-hover",
    "--seg-selected",
    "--focus-ring",
    "--focus-ring-width",
    "--focus-ring-offset",
    "--radius-lg",
    "--duration-fast",
    "--ease-standard"
  ]
}