Button

• primary: la acción principal de la vista («Practicar ahora», «Entrar», «Comprobar»).
• secondary: la alternativa a la primaria («Sugiéreme otra», «Practicar ahora» en el pie de Foco).
• tertiary: acción de poco énfasis o enlace inline («Ver mi ruta», «Pausar», «Finalizar simulación», «Ver la apertura otra vez»).

• Acciones solo con ícono (enviar, micrófono, cerrar) → IconButton.
• Sugerencias que el usuario elige → Chip.
• Navegación entre secciones → RailItem.

<button> píldora: ícono izquierdo opcional (20 / 16) · etiqueta · ícono derecho opcional. Padding 24 (md) / 16 (sm), gap 8.

default · hover (:hover) · focus (:focus-visible, 2 px borders/brand/focus al borde) · pressed (:active) · disabled (aria-disabled, sin opacidad, no responde al click). En Figma son la variante State; aquí son estados reales del DOM.

• role=button nativo; Enter/Espacio.
• Foco visible: 2 px borders/brand/focus por fuera del borde.
• Deshabilitado con aria-disabled (sigue en el orden de foco) y nunca con opacidad.
• La etiqueta es el nombre accesible; los íconos son decorativos (aria-hidden).

Verbo primero, sentence case, sin punto final, 1–3 palabras.

• Ninguno medido (test @DV-25: 44 de alto; aria-disabled sin disabled ni opacidad).

• 2026-10-26 · nace (T-02). Los dos booleanos + swap de Figma son un solo prop por lado (iconLeft, iconRight).