Button

Elemento de acción con variantes de estilo (primario, secundario, ghost), múltiples tamaños y disposición configurable de iconos.

Estado: review

1. Primary md

Mostrar HTML

<button type="button" class="gn-button gn-button--primary gn-button--md">Guardar</button>

2. Secondary md

Mostrar HTML

<button type="button" class="gn-button gn-button--secondary gn-button--md">Cancelar</button>

3. Ghost md

Mostrar HTML

<button type="button" class="gn-button gn-button--ghost gn-button--md">Deshacer</button>

4. Primary lg

Mostrar HTML

<button type="button" class="gn-button gn-button--primary gn-button--lg">Confirmar</button>

5. Primary sm

Mostrar HTML

<button type="button" class="gn-button gn-button--primary gn-button--sm">Confirmar</button>

6. Secondary con icono izquierda

Mostrar HTML

<button type="button" class="gn-button gn-button--secondary gn-button--md gn-button--icon-left">
  <svg class="gn-button__icon" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
    <path d="M13 11H21V13H13V21H11V13H3V11H11V2.99707H13V11Z" fill="currentColor" />
  </svg>
  Añadir
</button>

7. Secondary con icono derecha

Mostrar HTML

<button type="button" class="gn-button gn-button--secondary gn-button--md gn-button--icon-right">
  Siguiente
  <svg class="gn-button__icon" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
    <path d="M13 11H21V13H13V21H11V13H3V11H11V2.99707H13V11Z" fill="currentColor" />
  </svg>
</button>

8. Secondary icon-only

Mostrar HTML

<button type="button" class="gn-button gn-button--secondary gn-button--md gn-button--icon-only" aria-label="Añadir elemento">
  <svg class="gn-button__icon" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
    <path d="M13 11H21V13H13V21H11V13H3V11H11V2.99707H13V11Z" fill="currentColor" />
  </svg>
</button>

9. Primary disabled

Mostrar HTML

<button type="button" class="gn-button gn-button--primary gn-button--md" disabled>Primary</button>

10. Secondary disabled

Mostrar HTML

<button type="button" class="gn-button gn-button--secondary gn-button--md" disabled>Secondary</button>

11. Ghost disabled

Mostrar HTML

<button type="button" class="gn-button gn-button--ghost gn-button--md" disabled>Ghost</button>

El componente Button es el principal elemento interactivo utilizado para ejecutar acciones, enviar formularios y desencadenar eventos en toda la aplicación. Proporciona una retroalimentación visual clara y estados accesibles, y ha sido recientemente adaptado para responder a todas las especificaciones detectadas en Figma.

Uso

Los botones deben utilizarse para acciones explícitas. Son elementos interactivos semánticos y siempre deben tener etiquetas claras y concisas que indiquen qué acción ocurrirá al hacer clic.

Accesibilidad

Utilizar siempre el elemento semántico <button type="button"> o <button type="submit">.
Usar la etiqueta <a> únicamente cuando el botón sirva para redirigir a una URL.
El foco nativo (:focus-visible) ha sido diseñado con un "halo" doble alrededor del botón, asegurando gran visibilidad incluso en fondos azules o neutros.
Utilizar el atributo disabled para indicar visual y semánticamente que la acción no puede llevarse a cabo.

Variantes

Existen 3 variantes principales de estilo:

Primary: Acabado sólido para la acción principal. (.gn-button--primary)
Secondary: Fondo blanco con borde, usado como de baja interacción o cancelación. (.gn-button--secondary)
Ghost: Botón solo de texto con subrayado decorativo para interacciones opcionales o sin prioridad visual en la carga de página. (.gn-button--ghost)

Tamaños

SM (Small): Altura final reducida (.gn-button--sm).
MD (Medium): Tamaño normal por defecto (.gn-button--md).
LG (Large): Principal (.gn-button--lg).

Integración con Iconos

El botón ahora soporta cuatro combinaciones gracias al namespace interno .gn-button__icon:

Solo texto.
Icono a la izquierda: Se emplea .gn-button--icon-left.
Icono a la derecha: Se emplea .gn-button--icon-right.
Acabado 'Icon-Only': Se utiliza el modificador .gn-button--icon-only el cual adapta sus dimensiones de forma dinámica (e.g. padding exacto de 14px) para asemejarse al aspecto de un botón cuadrado, requiriendo su texto de aria-label.