Cristian Del Saz Escudo del Real Racing Club
Design SystemCase study
Ir a la web (se abre en otra pestaña)

Button

Botón de acción de la web del Real Racing Club (.button-m--*). Lanza una acción o navega a otra sección; tamaño M con seis variantes de color y radio que pasa de 4px a pill en hover.

Author
Cristian Del Saz
Last updated
2026-10-08
Version
1.00

Component

Variante por defecto: Size=M · Variant=Gold · State=Enabled, con label «Ver más».

Interactivo: pasa el ratón, púlsalo o enfócalo con Tab.

Anatomy

Contenedor horizontal con auto layout centrado: icono inicial opcional, label en mayúsculas e icono final opcional.

  1. 1

    Contenedor

    Superficie clicable. Fondo, borde (variantes outline) y radio cambian por variante y estado. Alto mínimo 50px.

  2. 2

    Icono inicial

    Opcional (prop Leading icon). 16px, hereda el color del label. Refuerza el significado (p. ej. bolsa en «Tienda»).

  3. 3

    Label

    Texto de la acción. Racing/Button M: condensed bold 16/100%, uppercase.

  4. 4

    Icono final

    Opcional (prop Trailing icon). Chevron 12px para acciones de navegación («Ver más», «Ir»).

Spacing

Padding 14px vertical y 24px horizontal, gap 8px entre icono y label, alto mínimo 50px. Igual en desktop y mobile.

Verde translúcido = padding · oro = área de contenido (icono 16 + gap 8 + label).

MedidaValorTokenEntre
Padding horizontal24pxbutton/m/padding-xborde ↔ contenido
Padding vertical14pxbutton/m/padding-yborde ↔ label
Gap icono ↔ label8pxbutton/m/gapicono ↔ label
Alto mínimo50pxbutton/m/min-height—

States

Enabled y Hover vienen de la web (hover: radio 25px + fondo más intenso). Pressed, Focus y Disabled no existen en la web: son propuesta.

EstadoDescripción
EnabledEstado de reposo.
HoverRadio 25px (pill) y fondo más intenso.
Pressed (propuesta)Hover + sombra interior 0 2 4 rgba(0,0,0,.25).
Focus (propuesta)Anillo de foco 2px button/focus-ring con 2px de separación.
Disabled (propuesta)Opacidad 40%, sin hover ni cursor.

Estructura

PropertyDesktopMobile
Height50px (min-height)50px (min-height)
Padding14px 24px14px 24px
Gap8px8px
LayoutHorizontal, centrado en ambos ejes, ancho hugHorizontal, centrado; puede ocupar el 100% del contenedor
Min Width— (hug al contenido)— (hug al contenido)
Radius4px · 25px en Hover/Pressed4px · 25px en Hover/Pressed
Border1px inside (solo variantes outline)1px inside (solo variantes outline)
TipografíaRacing/Button M · 16/100% Bold uppercaseRacing/Button M · 16/100% Bold uppercase
Eje / propiedadValores
VariantGold / Verde / Gold outline / Verde outline / Gold light / Verde light
StateEnabled / Hover / Pressed / Focus / Disabled
SizeM (S pendiente: .button-s--*, 42px, 14px)
LabelTexto (por defecto «Ver más»)
Leading / Trailing iconBoolean, off por defecto
Icon swapsInstance swap (Icon/Board, Icon/Chevron right)

Colors / Tokens & Code

TokenValueUsage

Do's & don'ts

Jerarquía: Gold/Verde para la acción principal; outline y light para acciones secundarias sobre fondos oscuros.

Don't

  • No pongas dos botones primarios uno al lado del otro: se pierde la jerarquía.
  • No sobrescribas colores de fondo o texto: cambia la prop Variant.
  • No uses outline ni light sobre fondo claro (BG-Oro-Light): el texto baja a ~2,3:1.
  • No elimines el anillo de foco: es obligatorio para la navegación por teclado.

Do

  • Usa un único botón Gold o Verde por bloque para marcar la acción principal.
  • Usa Gold outline o Gold light para acciones secundarias junto a un primario.
  • Añade el chevron final solo cuando el botón navega («Ver más», «Ir»).
  • Coloca outline y light solo sobre fondos verdes oscuros, donde su texto cumple contraste.

Accesibilidad

Semántica
  • Usa <button> para acciones y <a href> para navegación; nunca un <div> clicable.
  • Botón deshabilitado: atributo disabled en <button>; en enlaces, aria-disabled="true" y quitar el href.
Teclado
  • Enfocable con Tab en el orden del DOM. <button> se activa con Enter y Espacio; <a> solo con Enter.
  • Toda el área del contenedor es clicable, no solo el label.
Contraste (WCAG 2.1 AA)
  • ⚠ Blanco sobre Gold #B69D76 = 2,6:1 y sobre Verde #41B649 = 2,6:1: no cumplen AA (4,5:1) para 16px bold. En Hover (#9C7942 / #25923B) suben a ~4:1, tampoco llegan.
  • Recomendación: oscurecer el fondo (p. ej. Racing/Gold-Dark y Racing/Medium como base) o usar texto Racing/Dark.
  • Gold #B69D76 y Bright #41B649 sobre BG-Verde-Dark #072A19 ≈ 6:1 (cumple). Sobre BG-Oro-Light ≈ 2,3:1 (no cumple).
  • Anillo de foco Racing/Medium: 3,9:1 sobre BG-Verde-Dark y 3,5:1 sobre BG-Oro-Light (cumple 3:1 de componentes UI).
Focus
  • Anillo de 2px button/focus-ring (Racing/Medium) con 2px de separación y radio 8px, solo con :focus-visible.
  • La web actual no define estado de foco: hay que añadirlo.
Touch target
  • Alto mínimo 50px y ancho ≥ 90px con el label más corto («Ir»): supera 44×44 recomendado y 24×24 de WCAG 2.2 AA.
Lectores de pantalla
  • El nombre accesible es el label. Si el texto es genérico («Ver más», «Ir»), añade contexto: aria-label="Ver más noticias".
  • Los iconos son decorativos: aria-hidden="true". Un botón solo con icono necesita aria-label.
UX writing
  • Verbo en infinitivo o acción directa: «Ver más», «Comprar entradas», «Ir».
  • Mayúsculas por estilo (text-transform); escribe el texto en minúscula en el código.
  • Máximo 3 palabras / ~20 caracteres; el botón no hace salto de línea.
  • Evita «Clic aquí»: el label debe decir qué pasa.

Componentes internos

Iconos del sistema que se insertan como instance swap en los slots de icono.

  • Icono inicial · Icon/Board

    Icono 16px por defecto del slot inicial. Color heredado del token de texto de la variante.

  • Icono final · Icon/Chevron right

    Chevron 12px para acciones que navegan.

Info internal components

Variantes y espaciado de cada componente interno.

ComponenteVariantesEspaciado
Icon/BoardDefaultGap icono ↔ label: 8px (button/m/gap)
Icon/Chevron rightDefaultGap label ↔ icono: 8px (button/m/gap)