{
  "element": "nve-button",
  "entrypoint": "@nvidia-elements/core/button/button.examples.json",
  "items": [
    {
      "id": "button",
      "name": "Default",
      "template": "<nve-button>standard</nve-button>\n",
      "summary": "Basic button component with standard appearance and behavior for primary user actions.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "button-group-states",
      "name": "GroupStates",
      "template": "<div nve-layout=\"row gap:xs\">\n  <nve-button>standard</nve-button>\n  <nve-button selected>selected</nve-button>\n  <nve-button pressed>pressed</nve-button>\n  <nve-button disabled>disabled</nve-button>\n</div>\n",
      "summary": "Button interaction states including hover, focus, pressed, selected, and disabled.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "button-interaction",
      "name": "Interaction",
      "template": "<div nve-layout=\"row gap:xs\">\n  <nve-button>standard</nve-button>\n  <nve-button interaction=\"emphasis\">emphasis</nve-button>\n  <nve-button interaction=\"destructive\">destructive</nve-button>\n</div>\n",
      "summary": "Interaction states that communicate button hierarchy, importance, and availability to users.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "button-container",
      "name": "Container",
      "template": "<div nve-layout=\"row gap:xs align:vertical-center\">\n  <nve-button container=\"inline\">inline</nve-button>\n  <nve-button container=\"flat\">flat</nve-button>\n  <nve-button>default</nve-button>\n</div>\n",
      "summary": "Container style variants for buttons to accommodate different visual weight and context.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "button-size",
      "name": "Size",
      "template": "<div nve-layout=\"row gap:xs\">\n  <nve-button size=\"sm\">small button</nve-button>\n  <nve-button>standard button</nve-button>\n  <nve-button size=\"lg\">large button</nve-button>\n</div>\n",
      "summary": "Button size variants to accommodate layout densities and touch target requirements.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "button-pressed",
      "name": "Pressed",
      "template": "<div nve-layout=\"row gap:xs align:vertical-center\">\n  <nve-button pressed container=\"inline\">pressed inline</nve-button>\n  <nve-button pressed container=\"flat\">pressed flat</nve-button>\n  <nve-button pressed>pressed</nve-button>\n</div>\n",
      "summary": "Pressed state for toggle buttons marking active/selected state with clear visual feedback.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "button-selected",
      "name": "Selected",
      "template": "<div nve-layout=\"row gap:xs align:vertical-center\">\n  <nve-button selected container=\"inline\">selected inline</nve-button>\n  <nve-button selected container=\"flat\">selected flat</nve-button>\n  <nve-button selected>selected</nve-button>\n</div>\n",
      "summary": "Button selection states to accommodate different visual weight and context.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "button-disabled",
      "name": "Disabled",
      "template": "<div nve-layout=\"row gap:xs align:vertical-center\">\n  <nve-button disabled container=\"inline\">disabled inline</nve-button>\n  <nve-button disabled container=\"flat\">disabled flat</nve-button>\n  <nve-button disabled>disabled</nve-button>\n</div>\n",
      "summary": "Button disabled states to accommodate different visual weight and context.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "button-invoker-command",
      "name": "InvokerCommand",
      "template": "<nve-icon\n  id=\"rotation-target\"\n  name=\"sparkles\"\n  aria-label=\"sparkles icon\"\n  style=\"inline-size: 100px; block-size: 100px\"\n></nve-icon>\n<section>\n  <nve-button commandfor=\"rotation-target\" command=\"--rotate-left\">Rotate left</nve-button>\n  <nve-button commandfor=\"rotation-target\" command=\"--rotate-right\">Rotate right</nve-button>\n  <nve-button commandfor=\"popover\" command=\"toggle-popover\">toggle-popover</nve-button>\n</section>\n<nve-toggletip id=\"popover\">popover</nve-toggletip>\n<script type=\"module\">\n  const target = document.getElementById(\"rotation-target\");\n  target.addEventListener(\"command\", (event) => {\n    if (event.command === \"--rotate-left\") {\n      target.style.rotate = \"-90deg\";\n    } else if (event.command === \"--rotate-right\") {\n      target.style.rotate = \"90deg\";\n    }\n  });\n</script>\n",
      "summary": "Use the `commandfor` and `command` attributes to trigger custom Invoker Commands, such as rotating an image.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "button-with-icon",
      "name": "WithIcon",
      "template": "<nve-button><nve-icon name=\"person\"></nve-icon> button</nve-button>\n<nve-button>button <nve-icon name=\"person\"></nve-icon></nve-button>\n",
      "summary": "Button with icons positioned before or after text to enhance visual clarity and user understanding.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "button-flat",
      "name": "Flat",
      "template": "<div nve-layout=\"row gap:xs\">\n  <nve-button container=\"flat\">standard</nve-button>\n  <nve-button container=\"flat\" interaction=\"emphasis\">emphasis</nve-button>\n  <nve-button container=\"flat\" interaction=\"destructive\">destructive</nve-button>\n  <nve-button container=\"flat\" disabled>disabled</nve-button>\n</div>\n",
      "summary": "Flat button style for secondary actions with minimal visual weight, maintaining clear interaction states.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "button-inline",
      "name": "Inline",
      "template": "<div nve-layout=\"row gap:xs\">\n  <nve-button container=\"inline\">standard</nve-button>\n  <nve-button container=\"inline\" interaction=\"emphasis\">emphasis</nve-button>\n  <nve-button container=\"inline\" interaction=\"destructive\">destructive</nve-button>\n  <nve-button container=\"inline\" disabled>disabled</nve-button>\n</div>\n",
      "summary": "Inline button style for text-like actions that blend with content while maintaining button functionality.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "button-link",
      "name": "Link",
      "template": "<div nve-layout=\"row gap:xs\">\n  <nve-button><a href=\"#\">standard</a></nve-button>\n  <nve-button interaction=\"emphasis\"><a href=\"#\">emphasis</a></nve-button>\n  <nve-button interaction=\"destructive\"><a href=\"#\">destructive</a></nve-button>\n  <nve-button disabled><a href=\"#\">disabled</a></nve-button>\n</div>\n",
      "summary": "Button styling applied to links for consistent visual treatment while maintaining semantic navigation behavior.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "button-selected-flat",
      "name": "SelectedFlat",
      "template": "<div nve-layout=\"row gap:xs\">\n  <nve-button selected container=\"flat\">selected</nve-button>\n  <nve-button container=\"flat\">unselected</nve-button>\n</div>\n",
      "summary": "Flat button selection state for choice groups where one option is active, providing clear selection feedback.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "button-link-flat",
      "name": "LinkFlat",
      "template": "<div nve-layout=\"row gap:xs\">\n  <nve-button container=\"flat\"><a href=\"#\">flat</a></nve-button>\n  <nve-button container=\"flat\" interaction=\"emphasis\"><a href=\"#\">flat emphasis</a></nve-button>\n  <nve-button container=\"flat\" interaction=\"destructive\"><a href=\"#\">flat destructive</a></nve-button>\n</div>\n",
      "summary": "Flat button styling for navigation links, providing subtle visual treatment for secondary navigation actions.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "button-no-wrap",
      "name": "NoWrap",
      "template": "<nve-button style=\"--width: 100px\">item item item</nve-button>\n<nve-button style=\"--width: 100px\"> <span>item</span><span>item</span><span>item</span> </nve-button>\n",
      "summary": "Text wrapping behavior in constrained widths, where content adapts to available space.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "button-form-submit",
      "name": "FormSubmit",
      "template": "<form id=\"test-form\">\n  <nve-button name=\"test-button\" value=\"test-value\">submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"#test-form\");\n  const button = document.querySelector('[name=\"test-button\"]');\n  button.addEventListener(\"click\", (e) => console.log(e));\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    console.log(Object.fromEntries(new FormData(form, e.submitter)));\n  });\n</script>\n",
      "summary": "Form submission button with proper form integration and data handling for user input processing.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "button-form-control",
      "name": "FormControl",
      "template": "<div nve-layout=\"row gap:xs\" style=\"max-width: 400px\">\n  <nve-search>\n    <input type=\"search\" placeholder=\"search\" aria-label=\"search\" />\n  </nve-search>\n  <nve-button nve-control>filter option <nve-icon name=\"caret\" direction=\"down\" size=\"sm\"></nve-icon></nve-button>\n</div>\n",
      "summary": "Use the form control option for buttons that open custom controls such as dropdowns, filter menus, or pickers within a form layout. This pattern keeps the UI cohesive and helps users recognize the button as part of the form.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "button-popover",
      "name": "Popover",
      "template": "<div popover id=\"popover-example\">popover</div>\n<nve-button popovertarget=\"popover-example\">toggle</nve-button>\n",
      "summary": "Button integrated with popover API to trigger contextual overlays, providing extra information or controls.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "button-background-override",
      "name": "BackgroundOverride",
      "template": "<style>\n  nve-button.custom {\n    --color: var(--nve-sys-text-black-color);\n    --background-image: linear-gradient(340deg, rgb(255 234 177) 0%, var(--nve-ref-color-yellow-amber-900) 60%);\n    &:hover {\n      --background-image: linear-gradient(\n        340deg,\n        rgb(255 234 177) 0%,\n        color-mix(in oklab, var(--nve-ref-color-yellow-amber-900) 100%, #000 4%) 60%\n      );\n    }\n  }\n</style>\n<nve-button class=\"custom\">Create Account</nve-button>\n<nve-button>Create Account</nve-button>\n",
      "summary": "Override button appearance with custom CSS properties for brand-specific designs while maintaining functionality.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "button-valid-link-button",
      "name": "ValidLinkButton",
      "template": "<nve-button><a href=\"#\">default</a></nve-button>\n",
      "summary": "Button styled as a link by slotting an anchor tag inside. Use when an action needs button visual treatment while maintaining semantic link navigation and accessibility.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "button-invalid-link-button",
      "name": "InvalidLinkButton",
      "template": "<a href=\"#\"><nve-button>default</nve-button></a>\n",
      "summary": "Do not wrap buttons in anchor tags.",
      "description": "",
      "composition": false,
      "tags": [
        "anti-pattern"
      ]
    },
    {
      "id": "button-progress-disclosure",
      "name": "ProgressDisclosure",
      "template": "<nve-button>\n  <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n  Submitting\n</nve-button>\n",
      "summary": "Use a progress ring within a button to communicate that an action is processing and prevent repeated submissions. Limit this pattern to short, indeterminate actions (about five seconds or less); for longer or determinate tasks, use a progress bar or ring outside the button.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "button-contrast-colored-backgrounds",
      "name": "ContrastColoredBackgrounds",
      "template": "<div nve-layout=\"column gap:lg\" style=\"width: 280px\">\n  <nve-toolbar status=\"accent\">\n    <div nve-text=\"label medium sm\">10 Selected</div>\n    <nve-button slot=\"suffix\">Edit</nve-button>\n  </nve-toolbar>\n  <nve-alert-group status=\"danger\">\n    <nve-alert> Error Detected <nve-button slot=\"actions\" container=\"flat\">Review</nve-button> </nve-alert>\n  </nve-alert-group>\n  <nve-card style=\"width: 280px\">\n    <nve-card-content\n      style=\"\n        width: 100%;\n        height: 100%;\n        aspect-ratio: 16/9;\n        object-fit: cover;\n        background: repeating-conic-gradient(var(--nve-sys-layer-overlay-background) 0% 25%, transparent 0% 50%) 50% /\n          40px 40px;\n        background-position: center;\n        border-style: hidden;\n      \"\n    >\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"row gap:xs\">\n        <nve-button container=\"flat\" style=\"margin-left: auto\">Cancel</nve-button>\n        <nve-button>action</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n</div>\n",
      "summary": "Use standard interaction styling to keep buttons readable on contrasting backgrounds in light and dark themes. This pattern verifies the static button colors that deliver the intended contrast for each theme.",
      "description": "",
      "composition": true,
      "tags": [
        "pattern"
      ]
    }
  ]
}