# Button / Botón

> Triggers an action. Primary, outline, secondary, ghost, destructive and link variants.

Page: https://componentes-lovat.vercel.app/c/button/  
License: MIT · Design: coss ui (MIT) · button.tsx  
Requires: tokens.css  
Context: ambos · Density: baja · Tone: sobria

## Files

- Tokens (once): https://componentes-lovat.vercel.app/tokens.css
- HTML: https://componentes-lovat.vercel.app/raw/button/button.html
- CSS: https://componentes-lovat.vercel.app/raw/button/button.css
- JS: https://componentes-lovat.vercel.app/raw/button/button.js
- Everything in one file: https://componentes-lovat.vercel.app/r/button.html

Dark theme: add class `dark` to `<html>`.

## When to use

- For on-page actions: save, open, copy.
- The link variant navigates with a text-button look.

## When not to use

- To navigate with a filled look: use <a class="c-btn">.
- More than one primary per area.

## Accessibility

Roles: button, link

| Keys | Action |
|---|---|
| Enter / Espacio | Activates the button |

- Loading uses data-loading and aria-disabled: focus stays and it is announced in a role=status region.
- On touch screens the hit area grows to 44 px without changing the visible size.
- Icon-only buttons carry aria-label.

## Editable parts

Marked with `data-parte` in the HTML.
- `accion` (accion): Button

## Code

```html
<div class="c-btn-row">
  <button class="c-btn c-btn--primary" type="button">Guardar</button>
  <button class="c-btn c-btn--outline" type="button">Cancelar</button>
  <button class="c-btn c-btn--secondary" type="button">Duplicar</button>
  <button class="c-btn c-btn--ghost" type="button">Omitir</button>
  <button class="c-btn c-btn--destructive" type="button">Eliminar</button>
  <a class="c-btn c-btn--link" href="#docs">Ver documentación</a>
</div>
<div class="c-btn-row">
  <button class="c-btn c-btn--outline" type="button">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 15V3"/><path d="m7 10 5 5 5-5"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/></svg>
    Descargar
  </button>
  <button class="c-btn c-btn--outline c-btn--icon" type="button" aria-label="Agregar">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
  </button>
  <button class="c-btn c-btn--primary" type="button" data-c-loading-demo>
    Publicar
    <svg class="c-btn__spinner" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
  </button>
  <button class="c-btn c-btn--primary" type="button" disabled>No disponible</button>
  <button class="c-btn c-btn--outline c-btn--sm" type="button">Pequeño</button>
  <button class="c-btn c-btn--outline c-btn--lg" type="button">Grande</button>
</div>
<p class="c-sr-only" role="status" data-c-btn-status></p>
```

```css
/* button · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).
   Generado por tools/build_css.py desde button.tw.json. No editar a mano. Necesita tokens.css. */
.c-btn__spinner{pointer-events:none;position:absolute}
.c-btn{position:relative;display:inline-flex}
.c-btn--icon{width:calc(var(--spacing)*9);height:calc(var(--spacing)*9)}
.c-btn--sm{height:calc(var(--spacing)*8)}
.c-btn{height:calc(var(--spacing)*9)}
.c-btn--lg{height:calc(var(--spacing)*10)}
.c-btn{flex-shrink:0}
.c-btn__spinner{animation:var(--animate-spin)}
.c-btn{cursor:pointer;align-items:center;justify-content:center}
.c-btn--sm{gap:calc(var(--spacing)*1.5)}
.c-btn{gap:calc(var(--spacing)*2);border-radius:var(--radius);border-style:var(--tw-border-style);border-width:1px}
.c-btn--destructive{border-color:var(--destructive)}
.c-btn--outline{border-color:var(--input)}
.c-btn--primary{border-color:var(--primary)}
.c-btn--secondary{border-color:#0000}
.c-btn--ghost{border-color:#0000}
.c-btn--link{border-color:#0000}
.c-btn--destructive{background-color:var(--destructive)}
.c-btn--outline{background-color:var(--popover)}
.c-btn--primary{background-color:var(--primary)}
.c-btn--secondary{background-color:var(--secondary)}
.c-btn--icon{padding-inline:calc(var(--spacing)*0)}
.c-btn--sm{padding-inline:calc(calc(var(--spacing)*2.5) - 1px)}
.c-btn{padding-inline:calc(calc(var(--spacing)*3) - 1px)}
.c-btn--lg{padding-inline:calc(calc(var(--spacing)*3.5) - 1px)}
.c-btn{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);white-space:nowrap}
.c-btn--outline{color:var(--foreground)}
.c-btn--ghost{color:var(--foreground)}
.c-btn--link{color:var(--foreground)}
.c-btn--primary{color:var(--primary-foreground)}
.c-btn--secondary{color:var(--secondary-foreground)}
.c-btn--destructive{color:var(--color-white)}
.c-btn--link{text-underline-offset:4px}
.c-btn--outline{--tw-shadow-alpha:5%;--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
@supports (color:lab(0% 0 0)){
.c-btn--outline{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,lab(0% 0 0/.05))}
}
.c-btn--primary{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.c-btn--destructive{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:var(--destructive)}
@supports (color:color-mix(in lab, red, red)){
.c-btn--destructive{--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--destructive)24%,transparent)var(--tw-shadow-alpha),transparent)}
}
.c-btn--primary{--tw-shadow-color:var(--primary)}
@supports (color:color-mix(in lab, red, red)){
.c-btn--primary{--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--primary)24%,transparent)var(--tw-shadow-alpha),transparent)}
}
.c-btn{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-outline-style:none;outline-style:none}
.c-btn--primary:not(:disabled){--tw-inset-shadow:inset 0 1px var(--tw-inset-shadow-color,#ffffff29)}
.c-btn--destructive:not(:disabled){--tw-inset-shadow:inset 0 1px var(--tw-inset-shadow-color,#ffffff29)}
@supports (color:color-mix(in lab, red, red)){
.c-btn--primary:not(:disabled){--tw-inset-shadow:inset 0 1px var(--tw-inset-shadow-color,color-mix(in oklab,var(--color-white)16%,transparent))}
.c-btn--destructive:not(:disabled){--tw-inset-shadow:inset 0 1px var(--tw-inset-shadow-color,color-mix(in oklab,var(--color-white)16%,transparent))}
}
.c-btn--primary:not(:disabled){box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.c-btn--destructive:not(:disabled){box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.c-btn--outline:not(:is(.dark *)){background-clip:padding-box}
.c-btn:before{content:var(--tw-content);pointer-events:none;content:var(--tw-content);position:absolute;content:var(--tw-content);inset:calc(var(--spacing)*0);content:var(--tw-content);border-radius:calc(var(--radius-lg) - 1px)}
.c-btn--outline:not(:disabled):not(:active):not([data-pressed]):before{content:var(--tw-content);--tw-shadow:0 1px var(--tw-shadow-color,#0000000a)}
@supports (color:color-mix(in lab, red, red)){
.c-btn--outline:not(:disabled):not(:active):not([data-pressed]):before{--tw-shadow:0 1px var(--tw-shadow-color,color-mix(in oklab,var(--color-black)4%,transparent))}
}
.c-btn--outline:not(:disabled):not(:active):not([data-pressed]):before{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
@media (hover:hover){
.c-btn--outline:hover{background-color:var(--accent)}
.c-btn--ghost:hover{background-color:var(--accent)}
}
@media (hover:hover){
@supports (color:color-mix(in lab, red, red)){
.c-btn--outline:hover{background-color:color-mix(in oklab,var(--accent)50%,transparent)}
}}
@media (hover:hover){
.c-btn--destructive:hover{background-color:var(--destructive)}
}
@media (hover:hover){
@supports (color:color-mix(in lab, red, red)){
.c-btn--destructive:hover{background-color:color-mix(in oklab,var(--destructive)90%,transparent)}
}}
@media (hover:hover){
.c-btn--primary:hover{background-color:var(--primary)}
}
@media (hover:hover){
@supports (color:color-mix(in lab, red, red)){
.c-btn--primary:hover{background-color:color-mix(in oklab,var(--primary)90%,transparent)}
}}
@media (hover:hover){
.c-btn--secondary:hover{background-color:var(--secondary)}
}
@media (hover:hover){
@supports (color:color-mix(in lab, red, red)){
.c-btn--secondary:hover{background-color:color-mix(in oklab,var(--secondary)90%,transparent)}
}}
@media (hover:hover){
.c-btn--link:hover{text-decoration-line:underline}
}
.c-btn:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color:var(--ring);--tw-ring-offset-width:1px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background)}
.c-btn:disabled{pointer-events:none;opacity:.64}
.c-btn[data-loading]{color:#0000;-webkit-user-select:none;user-select:none}
.c-btn--outline[data-pressed]{background-color:var(--accent)}
.c-btn--ghost[data-pressed]{background-color:var(--accent)}
@supports (color:color-mix(in lab, red, red)){
.c-btn--outline[data-pressed]{background-color:color-mix(in oklab,var(--accent)50%,transparent)}
}
.c-btn--destructive[data-pressed]{background-color:var(--destructive)}
@supports (color:color-mix(in lab, red, red)){
.c-btn--destructive[data-pressed]{background-color:color-mix(in oklab,var(--destructive)90%,transparent)}
}
.c-btn--primary[data-pressed]{background-color:var(--primary)}
@supports (color:color-mix(in lab, red, red)){
.c-btn--primary[data-pressed]{background-color:color-mix(in oklab,var(--primary)90%,transparent)}
}
.c-btn--secondary[data-pressed]{background-color:var(--secondary)}
@supports (color:color-mix(in lab, red, red)){
.c-btn--secondary[data-pressed]{background-color:color-mix(in oklab,var(--secondary)90%,transparent)}
}
.c-btn--link[data-pressed]{text-decoration-line:underline}
@media (min-width:40rem){
.c-btn--icon{width:calc(var(--spacing)*8);height:calc(var(--spacing)*8)}
.c-btn--sm{height:calc(var(--spacing)*7)}
.c-btn{height:calc(var(--spacing)*8)}
.c-btn--lg{height:calc(var(--spacing)*9)}
.c-btn{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
}
.c-btn--outline:is(.dark *){background-color:var(--input)}
@supports (color:color-mix(in lab, red, red)){
.c-btn--outline:is(.dark *){background-color:color-mix(in oklab,var(--input)32%,transparent)}
}
.c-btn--outline:is(.dark *):not(:disabled):before{content:var(--tw-content);--tw-shadow:0 -1px var(--tw-shadow-color,#ffffff05)}
@supports (color:color-mix(in lab, red, red)){
.c-btn--outline:is(.dark *):not(:disabled):before{--tw-shadow:0 -1px var(--tw-shadow-color,color-mix(in oklab,var(--color-white)2%,transparent))}
}
.c-btn--outline:is(.dark *):not(:disabled):before{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.c-btn--outline:is(.dark *):not(:disabled):not(:active):not([data-pressed]):before{content:var(--tw-content);--tw-shadow:0 -1px var(--tw-shadow-color,#ffffff0f)}
@supports (color:color-mix(in lab, red, red)){
.c-btn--outline:is(.dark *):not(:disabled):not(:active):not([data-pressed]):before{--tw-shadow:0 -1px var(--tw-shadow-color,color-mix(in oklab,var(--color-white)6%,transparent))}
}
.c-btn--outline:is(.dark *):not(:disabled):not(:active):not([data-pressed]):before{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
@media (hover:hover){
.c-btn--outline:is(.dark *):hover{background-color:var(--input)}
}
@media (hover:hover){
@supports (color:color-mix(in lab, red, red)){
.c-btn--outline:is(.dark *):hover{background-color:color-mix(in oklab,var(--input)64%,transparent)}
}}
.c-btn--outline:is(.dark *)[data-pressed]{background-color:var(--input)}
@supports (color:color-mix(in lab, red, red)){
.c-btn--outline:is(.dark *)[data-pressed]{background-color:color-mix(in oklab,var(--input)64%,transparent)}
}
@media (pointer:coarse){
.c-btn:after{content:var(--tw-content);position:absolute;content:var(--tw-content);width:100%;height:100%;content:var(--tw-content);min-height:calc(var(--spacing)*11);content:var(--tw-content);min-width:calc(var(--spacing)*11)}
}
.c-btn svg{pointer-events:none;margin-inline:calc(var(--spacing)*-.5);flex-shrink:0}
.c-btn svg:not([class*=opacity-]){opacity:.8}
.c-btn svg:not([class*=size-]){width:calc(var(--spacing)*4.5);height:calc(var(--spacing)*4.5)}
@media (min-width:40rem){
.c-btn svg:not([class*=size-]){width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}
}
.c-btn--secondary:is(:active,[data-pressed]){background-color:var(--secondary)}
@supports (color:color-mix(in lab, red, red)){
.c-btn--secondary:is(:active,[data-pressed]){background-color:color-mix(in oklab,var(--secondary)80%,transparent)}
}
.c-btn--primary:is(:active,[data-pressed]){--tw-inset-shadow:inset 0 1px var(--tw-inset-shadow-color,#00000014)}
.c-btn--destructive:is(:active,[data-pressed]){--tw-inset-shadow:inset 0 1px var(--tw-inset-shadow-color,#00000014)}
@supports (color:color-mix(in lab, red, red)){
.c-btn--primary:is(:active,[data-pressed]){--tw-inset-shadow:inset 0 1px var(--tw-inset-shadow-color,color-mix(in oklab,var(--color-black)8%,transparent))}
.c-btn--destructive:is(:active,[data-pressed]){--tw-inset-shadow:inset 0 1px var(--tw-inset-shadow-color,color-mix(in oklab,var(--color-black)8%,transparent))}
}
.c-btn--primary:is(:active,[data-pressed]){box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.c-btn--destructive:is(:active,[data-pressed]){box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.c-btn--primary:is(:disabled,:active,[data-pressed]){--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.c-btn--destructive:is(:disabled,:active,[data-pressed]){--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.c-btn--outline:is(:disabled,:active,[data-pressed]){--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
/* propio */
.c-btn__spinner{display:none;color:var(--foreground)}
.c-btn[data-loading] .c-btn__spinner{display:block}
.c-btn--primary .c-btn__spinner{color:var(--primary-foreground)}
.c-btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.c-btn[aria-disabled=true]{cursor:progress}
.c-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
```

```js
/* Botón: estado de carga. Componentes.button.setLoading(boton, true|false, textoParaLector) */
(function () {
  const C = (window.Componentes = window.Componentes || {});

  function setLoading(btn, on, message) {
    try {
      if (on) { btn.setAttribute('data-loading', ''); btn.setAttribute('aria-disabled', 'true'); }
      else { btn.removeAttribute('data-loading'); btn.removeAttribute('aria-disabled'); }
      const status = document.querySelector('[data-c-btn-status]');
      if (status && message) status.textContent = message;
    } catch (e) { console.warn('[button]', e); }
  }

  // Con aria-disabled el botón conserva el foco, pero no debe hacer nada.
  document.addEventListener('click', (e) => {
    const btn = e.target.closest?.('.c-btn[aria-disabled="true"]');
    if (btn) { e.preventDefault(); e.stopImmediatePropagation(); }
  }, true);

  function init(root) {
    (root || document).querySelectorAll('[data-c-loading-demo]:not([data-c-ready])').forEach((btn) => {
      btn.dataset.cReady = '';
      btn.addEventListener('click', () => {
        setLoading(btn, true, 'Publicando…');
        setTimeout(() => setLoading(btn, false, 'Publicado.'), 1600);
      });
    });
  }

  C.button = { setLoading, init };
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => init());
  else init();
})();
```

## Credits

- coss ui (MIT) · button.tsx: https://coss.com/ui
- W3C WAI-ARIA APG, Button: https://www.w3.org/WAI/ARIA/apg/patterns/button/