Ir al contenido
English

Navegar

English

Escribe para buscar. Pulsa Escape para cerrar.

    Componentes · css

    Botón (button)

    Usa <button> para acciones y <a> para navegar; ambos admiten las mismas clases. Aquí no interviene JavaScript.

    CSS: incluido en ivolt.css; suelto en css/components/button.css (necesita core.css).

    Todas las variantes del botónfixtures/button/variants.htmlAbrir sola — Todas las variantes del botón
    <div class="iv-cluster">
  <button class="iv-button iv-button--primary" type="button">Primary</button>
  <button class="iv-button iv-button--secondary" type="button">Secondary</button>
  <button class="iv-button iv-button--ghost" type="button">Ghost</button>
  <button class="iv-button iv-button--danger" type="button">Danger</button>
  <button class="iv-button" type="button">Neutral</button>
  <a class="iv-button iv-button--secondary" href="#docs">Link as button</a>
</div>

    Variantes

    Sin variante, el botón es neutro. --primary es para la acción principal de una vista, --secondary la perfila, --ghost es solo texto y --danger marca las acciones destructivas.

    Tamaños y solo icono

    La altura por defecto es 2.5rem; --sm mide 2rem y --lg, 3rem. Los botones de solo icono necesitan aria-label y mantienen un área cuadrada de al menos 24 × 24 px.

    Tamaños y solo iconofixtures/button/sizes.htmlAbrir sola — Tamaños y solo icono
    <div class="iv-cluster">
  <button class="iv-button iv-button--primary iv-button--sm" type="button">Small</button>
  <button class="iv-button iv-button--primary" type="button">Default</button>
  <button class="iv-button iv-button--primary iv-button--lg" type="button">Large</button>
  <button class="iv-button iv-button--secondary iv-button--icon" type="button" aria-label="Search">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></svg>
  </button>
</div>

    Estados

    Usa el atributo nativo disabled en los botones y aria-disabled="true" en los enlaces. aria-busy="true" muestra un indicador, bloquea los eventos de puntero y conserva la etiqueta. Los estilos de hover solo se aplican en dispositivos con hover; el anillo de foco usa --iv-color-focus en :focus-visible.

    Deshabilitado, ocupado y focofixtures/button/states.htmlAbrir sola — Deshabilitado, ocupado y foco
    <div class="iv-cluster">
  <button class="iv-button iv-button--primary" type="button" disabled>Disabled</button>
  <a class="iv-button iv-button--secondary" href="#docs" aria-disabled="true">Disabled link</a>
  <button class="iv-button iv-button--primary" type="button" aria-busy="true">Saving…</button>
</div>

    Grupos

    Botones unidos en un grupofixtures/button/group.htmlAbrir sola — Botones unidos en un grupo
    <div class="iv-button-group" role="group" aria-label="View mode">
  <button class="iv-button iv-button--secondary" type="button" aria-pressed="true">List</button>
  <button class="iv-button iv-button--secondary" type="button" aria-pressed="false">Grid</button>
  <button class="iv-button iv-button--secondary" type="button" aria-pressed="false">Map</button>
</div>

    Personalizar

    .iv-button { --iv-button-radius: var(--iv-radius-full); }
.iv-button--primary { --iv-button-bg: var(--iv-color-accent); --iv-button-fg: var(--iv-color-on-accent); }

    Propiedades locales: --iv-button-bg, --iv-button-fg, --iv-button-border, --iv-button-radius.

    Errores frecuentes

    • Un <div> con la clase de botón: no recibe el foco ni se activa con el teclado.
    • Botón de solo icono sin aria-label.
    • Varios botones --primary en una misma vista; deja una sola acción principal.