Button Outline

/* Componente: Button Outline */
/* Categoría: buttons · Librería: shadcn · Versión: 1.0.0 */
/* Botón outline IA-First: navegación secundaria (saber más, ver detalles) con menor peso visual; herramienta learnMore con intención navigate. */
/* Importar: npx webmcpcss components import shadcn-button-outline */

/* shadcn/ui: el HTML es el DOM que renderiza <Button …> (data-slot="button"); pasa data-tool como prop. */
[data-slot="button"][data-tool="learnMore"] {
  webmcp-tool: "learnMore";
  webmcp-description: "Abre más información o los detalles del elemento (navegación secundaria)";
  webmcp-intent: "navigate";
  webmcp-confirmation: "none";
  webmcp-permissions: "read-only";
  webmcp-accessibility: "focus-visible: ring; min-target: 44px";
}

<button data-slot="button" data-variant="outline" data-tool="learnMore" type="button"
  class="inline-flex h-9 items-center justify-center gap-2 whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium transition-all outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground">
  Saber más
</button>

<Button variant="outline" data-tool="learnMore">Saber más</Button>

{
  "id": "shadcn-button-outline",
  "name": "Button Outline",
  "category": "buttons",
  "library": "shadcn",
  "version": "1.0.0",
  "description": "Botón outline IA-First: navegación secundaria (saber más, ver detalles) con menor peso visual; herramienta learnMore con intención navigate.",
  "author": "WebMCPcss Team",
  "tags": [
    "button",
    "outline",
    "navigate",
    "link",
    "shadcn"
  ],
  "controls": [
    {
      "variable": "--primary",
      "label": "Color primario",
      "type": "color",
      "default": "#18181b"
    },
    {
      "variable": "--primary-foreground",
      "label": "Texto sobre primario",
      "type": "color",
      "default": "#fafafa"
    },
    {
      "variable": "--radius",
      "label": "Radio",
      "type": "range",
      "default": "0.625rem",
      "min": 0,
      "max": 1.5,
      "step": 0.125,
      "unit": "rem"
    }
  ],
  "promptExamples": [
    "cambia el borde del botón Saber más a morado",
    "convierte el botón outline en relleno"
  ],
  "animateExamples": [
    "añade un brillo al pasar el ratón por el botón outline",
    "aplica fade-in al botón Saber más"
  ],
  "related": [
    "core-button-outline",
    "tailwind-button-outline",
    "bootstrap-button-outline",
    "mui-button-outline"
  ],
  "usage": {
    "framework": "react",
    "code": "<Button variant=\"outline\" data-tool=\"learnMore\">Saber más</Button>"
  },
  "preview": "preview.css",
  "css": "button-outline.webmcp.css",
  "html": "button-outline.html"
}