Button

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

Estado: draftEtiquetas: accion, formulario, interactivo

Vista Previa

La presentación del componente Button se divide en sus variantes principales, tamaños de escala, configuración de contenido y estados, permitiendo comparar visualmente su comportamiento en contexto.

1. Variantes Principales

Primary

Secondary

Ghost

2. Tamaños

Large (lg)

Medium (md) - Default

Small (sm)

3. Configuración de Contenido

Solo Texto

Icono Izquierda

Icono Derecha

Solo Icono

Nota de Accesibilidad: La variante .gn-button--icon-only requiere siempre el atributo aria-label o similar para ser accesible por lectores de pantalla, ya que carece de texto visible.

4. Estados

Default (Interactivo)

Disabled (Inactivo)

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: 1. Solo texto. 2. Icono a la izquierda: Se emplea .gn-button--icon-left. 3. Icono a la derecha: Se emplea .gn-button--icon-right. 4. 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.

HTML

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