{
  "element": "nve-icon-button",
  "entrypoint": "@nvidia-elements/core/icon-button/icon-button.examples.json",
  "items": [
    {
      "id": "icon-button",
      "name": "Default",
      "template": "<nve-icon-button icon-name=\"menu\"></nve-icon-button>\n",
      "summary": "Basic icon button for compact actions and toolbar controls with minimal visual footprint.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "icon-button-interactions",
      "name": "Interactions",
      "template": "<nve-icon-button icon-name=\"menu\"></nve-icon-button>\n<nve-icon-button interaction=\"emphasis\" icon-name=\"menu\"></nve-icon-button>\n<nve-icon-button interaction=\"destructive\" icon-name=\"menu\"></nve-icon-button>\n<nve-icon-button disabled icon-name=\"menu\"></nve-icon-button>\n",
      "summary": "Icon buttons with different interaction styles including default, emphasis, destructive, and disabled states.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "icon-button-size",
      "name": "Size",
      "template": "<nve-icon-button size=\"sm\" icon-name=\"menu\"></nve-icon-button>\n<nve-icon-button icon-name=\"menu\"></nve-icon-button>\n<nve-icon-button size=\"lg\" icon-name=\"menu\"></nve-icon-button>\n",
      "summary": "Icon buttons in different sizes (small, medium, large) for varying contexts and visual hierarchy.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "icon-button-flat-interactions",
      "name": "FlatInteractions",
      "template": "<nve-icon-button container=\"flat\" icon-name=\"menu\"></nve-icon-button>\n<nve-icon-button container=\"flat\" interaction=\"emphasis\" icon-name=\"menu\"></nve-icon-button>\n<nve-icon-button container=\"flat\" interaction=\"destructive\" icon-name=\"menu\"></nve-icon-button>\n<nve-icon-button container=\"flat\" icon-name=\"menu\" disabled></nve-icon-button>\n",
      "summary": "Flat container icon buttons with interaction styles for minimal visual weight in dense toolbars.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "icon-button-pressed",
      "name": "Pressed",
      "template": "<nve-icon-button pressed icon-name=\"filter-stroke\"></nve-icon-button>\n<nve-icon-button icon-name=\"filter\"></nve-icon-button>\n",
      "summary": "Icon buttons with pressed state for toggle functionality like filters or visibility controls.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "icon-button-pressed-flat",
      "name": "PressedFlat",
      "template": "<nve-icon-button pressed container=\"flat\" icon-name=\"eye-hidden\" aria-label=\"show\"></nve-icon-button>\n<nve-icon-button container=\"flat\" icon-name=\"eye\" aria-label=\"hide\"></nve-icon-button>\n",
      "summary": "Flat icon buttons with pressed state for low-emphasis toggles and compact toggle controls.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "icon-button-pressed-inline",
      "name": "PressedInline",
      "template": "<nve-icon-button pressed container=\"inline\" icon-name=\"eye-hidden\" aria-label=\"show\"></nve-icon-button>\n<nve-icon-button container=\"inline\" icon-name=\"eye\" aria-label=\"hide\"></nve-icon-button>\n",
      "summary": "Inline icon buttons with pressed state for minimal toggle controls within text or content flows.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "icon-button-selected",
      "name": "Selected",
      "template": "<nve-icon-button selected icon-name=\"split-vertical\" aria-label=\"split vertical\"></nve-icon-button>\n<nve-icon-button icon-name=\"split-horizontal\" aria-label=\"split horizontal\"></nve-icon-button>\n<nve-icon-button icon-name=\"split-none\" aria-label=\"preview\"></nve-icon-button>\n",
      "summary": "Icon buttons with selected state for mutually exclusive options like view modes or layout choices.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "icon-button-selected-flat",
      "name": "SelectedFlat",
      "template": "<nve-icon-button selected container=\"flat\" icon-name=\"split-vertical\" aria-label=\"split vertical\"></nve-icon-button>\n<nve-icon-button container=\"flat\" icon-name=\"split-horizontal\" aria-label=\"split horizontal\"></nve-icon-button>\n<nve-icon-button container=\"flat\" icon-name=\"split-none\" aria-label=\"preview\"></nve-icon-button>\n",
      "summary": "Flat icon buttons with selected state for low-emphasis mode selection in compact toolbars.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "icon-button-selected-inline",
      "name": "SelectedInline",
      "template": "<nve-icon-button selected container=\"inline\" icon-name=\"split-vertical\" aria-label=\"split vertical\"></nve-icon-button>\n<nve-icon-button container=\"inline\" icon-name=\"split-horizontal\" aria-label=\"split horizontal\"></nve-icon-button>\n<nve-icon-button container=\"inline\" icon-name=\"split-none\" aria-label=\"preview\"></nve-icon-button>\n",
      "summary": "Inline icon buttons with selected state for minimal mode selection within content flows.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "icon-button-custom-icon",
      "name": "CustomIcon",
      "template": "<nve-icon-button interaction=\"emphasis\">ML</nve-icon-button>\n<nve-icon-button>🎉</nve-icon-button>\n<nve-icon-button> 🔗 <a href=\"#\" aria-label=\"custom icon button\"></a> </nve-icon-button>\n",
      "summary": "Icon buttons with custom content like text initials, emojis, or symbols for personalized actions.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "icon-button-link",
      "name": "Link",
      "template": "<nve-icon-button icon-name=\"menu\">\n  <a href=\"#\" aria-label=\"link to page\"></a>\n</nve-icon-button>\n",
      "summary": "Proper implementation of icon buttons with links, showing correct and incorrect anchor placement patterns.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "icon-button-themes",
      "name": "Themes",
      "template": "<div nve-theme=\"root light\">\n  <nve-icon-button icon-name=\"menu\"></nve-icon-button>\n  <nve-icon-button interaction=\"emphasis\" icon-name=\"menu\"></nve-icon-button>\n  <nve-icon-button interaction=\"destructive\" icon-name=\"menu\"></nve-icon-button>\n  <nve-icon-button container=\"flat\" icon-name=\"menu\"></nve-icon-button>\n  <nve-icon-button disabled icon-name=\"menu\"></nve-icon-button>\n</div>\n<div nve-theme=\"root dark\">\n  <nve-icon-button icon-name=\"menu\"></nve-icon-button>\n  <nve-icon-button interaction=\"emphasis\" icon-name=\"menu\"></nve-icon-button>\n  <nve-icon-button interaction=\"destructive\" icon-name=\"menu\"></nve-icon-button>\n  <nve-icon-button container=\"flat\" icon-name=\"menu\"></nve-icon-button>\n  <nve-icon-button disabled icon-name=\"menu\"></nve-icon-button>\n</div>\n",
      "summary": "Icon buttons styled for light and dark themes with all interaction states for theme consistency.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    }
  ]
}