Button Icon

/* Componente: Button Icon */
/* Categoría: buttons · Librería: mui · Versión: 1.0.0 */
/* Botón con icono IA-First: acción puntual (descargar, compartir) con texto accesible y confirmación requerida; herramienta downloadReport. */
/* Importar: npx webmcpcss components import mui-button-icon */

/* Material UI: el HTML es el DOM que renderiza <Button …>; pasa data-tool como prop. */
.MuiButton-root[data-tool="downloadReport"] {
  webmcp-tool: "downloadReport";
  webmcp-description: "Descarga el informe en PDF (requiere confirmación del usuario)";
  webmcp-intent: "action";
  webmcp-confirmation: "needed";
  webmcp-permissions: "restricted";
  webmcp-accessibility: "focus-visible: ring; min-target: 44px";
}

<button class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium" type="button" data-tool="downloadReport"><span class="MuiButton-startIcon"><svg class="MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg></span>Descargar</button>

<Button variant="contained" startIcon={<DownloadIcon />} data-tool="downloadReport">Descargar</Button>

{
  "id": "mui-button-icon",
  "name": "Button Icon",
  "category": "buttons",
  "library": "mui",
  "version": "1.0.0",
  "description": "Botón con icono IA-First: acción puntual (descargar, compartir) con texto accesible y confirmación requerida; herramienta downloadReport.",
  "author": "WebMCPcss Team",
  "tags": [
    "button",
    "icon",
    "download",
    "action",
    "mui"
  ],
  "controls": [
    {
      "variable": "--wm-primary",
      "label": "Color primario",
      "type": "color",
      "default": "#1976d2"
    },
    {
      "variable": "--wm-on-primary",
      "label": "Texto sobre primario",
      "type": "color",
      "default": "#ffffff"
    },
    {
      "variable": "--wm-radius",
      "label": "Radio",
      "type": "range",
      "default": "4px",
      "min": 0,
      "max": 24,
      "step": 1,
      "unit": "px"
    }
  ],
  "promptExamples": [
    "cambia el icono del botón Descargar por una flecha",
    "pon el botón con icono en gris"
  ],
  "animateExamples": [
    "haz que el botón Descargar pulse suavemente",
    "aplica slide-up al botón con icono"
  ],
  "related": [
    "core-button-icon",
    "tailwind-button-icon",
    "bootstrap-button-icon",
    "shadcn-button-icon"
  ],
  "usage": {
    "framework": "react",
    "code": "<Button variant=\"contained\" startIcon={<DownloadIcon />} data-tool=\"downloadReport\">Descargar</Button>"
  },
  "preview": "preview.css",
  "css": "button-icon.webmcp.css",
  "html": "button-icon.html"
}