Button Secondary
BotonesBootstrapv1.0.0buttonsecondarycancelbootstrap
Botón secundario IA-First: cancela o vuelve atrás sin efectos destructivos; herramienta cancelAction con intención cancel.
npx webmcpcss components import bootstrap-button-secondary/* Componente: Button Secondary */
/* Categoría: buttons · Librería: bootstrap · 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 bootstrap-button-secondary */
/* Bootstrap 5.3: clases .btn en el HTML; este archivo es el contrato para agentes. */
.btn[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 type="button" class="btn btn-secondary" data-tool="cancelAction">Cancelar</button>
{
"id": "bootstrap-button-secondary",
"name": "Button Secondary",
"category": "buttons",
"library": "bootstrap",
"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",
"bootstrap"
],
"controls": [
{
"variable": "--wm-primary",
"label": "Color primario",
"type": "color",
"default": "#0d6efd"
},
{
"variable": "--wm-radius",
"label": "Radio",
"type": "range",
"default": ".375rem",
"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",
"tailwind-button-secondary",
"mui-button-secondary",
"shadcn-button-secondary"
],
"preview": "preview.css",
"css": "button-secondary.webmcp.css",
"html": "button-secondary.html"
}Cómo usarlo
- Importa el componente a tu proyecto (HTML +
.webmcp.css+component.json):npx webmcpcss components import bootstrap-button-secondary --output ./src/components - O añade solo el contrato a tu
webmcp.cssexistente (bloque delimitado y actualizable):npx webmcpcss components import bootstrap-button-secondary --merge ./webmcp.css - Publícalo para los agentes: MCP (
webmcpcss mcp --serve --css ./webmcp.css),document.modelContext(webmcpcss standard compile ./webmcp.css --html index.html) o exporta a tu agente favorito (webmcpcss export --agent claude-code).
Herramientas para agentes
| Herramienta | Descripción | Parámetros | Intención | Confirmación | Selector |
|---|---|---|---|---|---|
cancelAction | Cancela la acción en curso o vuelve al paso anterior sin efectos destructivos | — | cancel | none | .btn[data-tool="cancelAction"] |
Ejemplos con la CLI
webmcpcss prompt — lenguaje natural sobre el componente
oculta el botón Cancelarcambia el texto del botón secundario a Volver
webmcpcss animate — animaciones declarativas
haz que el botón Cancelar aparezca deslizándosequita la animación del botón secundario