Button Secondary

/* Componente: Button Secondary */
/* Categoría: buttons · Librería: tailwind · Versión: 1.0.0 */
/* Botón secundario IA-First: cancela o vuelve atrás sin efectos destructivos; herramienta cancelAction con intención cancel. */
/* Importar: npx webmcpcss components import tailwind-button-secondary */

/* El aspecto lo dan las utilidades de Tailwind en el HTML; este archivo es el contrato para agentes. */
[data-tool="cancelAction"] {
  webmcp-tool: "cancelAction";
  webmcp-description: "Cancela la acción en curso o vuelve al paso anterior sin efectos destructivos";
  webmcp-intent: "cancel";
  webmcp-confirmation: "none";
  webmcp-permissions: "read-only";
  webmcp-accessibility: "focus-visible: ring; min-target: 44px";
}

<button data-tool="cancelAction" type="button"
  class="inline-flex min-h-[44px] items-center justify-center gap-2 rounded-[var(--wm-radius,0.5rem)] px-5 py-2.5 text-sm font-semibold transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--wm-primary,#2563eb)] disabled:cursor-not-allowed disabled:opacity-50 bg-[var(--wm-secondary,#f1f5f9)] text-[var(--wm-on-secondary,#0f172a)] hover:bg-slate-200">
  Cancelar
</button>

{
  "id": "tailwind-button-secondary",
  "name": "Button Secondary",
  "category": "buttons",
  "library": "tailwind",
  "version": "1.0.0",
  "description": "Botón secundario IA-First: cancela o vuelve atrás sin efectos destructivos; herramienta cancelAction con intención cancel.",
  "author": "WebMCPcss Team",
  "tags": [
    "button",
    "secondary",
    "cancel",
    "tailwind"
  ],
  "controls": [
    {
      "variable": "--wm-primary",
      "label": "Color primario",
      "type": "color",
      "default": "#2563eb"
    },
    {
      "variable": "--wm-on-primary",
      "label": "Texto sobre primario",
      "type": "color",
      "default": "#ffffff"
    },
    {
      "variable": "--wm-radius",
      "label": "Radio",
      "type": "range",
      "default": "0.5rem",
      "min": 0,
      "max": 1.5,
      "step": 0.125,
      "unit": "rem"
    }
  ],
  "promptExamples": [
    "oculta el botón Cancelar",
    "cambia el texto del botón secundario a Volver"
  ],
  "animateExamples": [
    "haz que el botón Cancelar aparezca deslizándose",
    "quita la animación del botón secundario"
  ],
  "related": [
    "core-button-secondary",
    "bootstrap-button-secondary",
    "mui-button-secondary",
    "shadcn-button-secondary"
  ],
  "preview": "preview.css",
  "css": "button-secondary.webmcp.css",
  "html": "button-secondary.html"
}