Button

Átomo · 108 variantes

El componente Button es el elemento de acción más usado del sistema. Define 108 variantes combinando Type, State, Icon y Size — todas extraídas directamente del archivo Figma.

Anatomía

container · h=40px radius=8px

1. Ícono (opcional)

Left o Right. Tamaño 14px. Mismo color que el label.

2. Label

Avenir Next 600. Tamaño según Size. Describe la acción.

3. Container

Radius 8px. Height definida por Size. Background por Type.

Tipos (Type)

Primary

Acción principal de la pantalla. Máximo 1 botón primario por sección.

Secondary

Acción secundaria o alternativa. Se puede usar junto con Primary.

Tamaños (Size)

Large · Medium · Small

Large

Height: 48pxPadding H: 24pxFont: 16px

CTAs principales, acciones en modales y formularios

Medium

Height: 40pxPadding H: 20pxFont: 14px

Uso general en la interfaz. El default.

Small

Height: 32pxPadding H: 16pxFont: 13px

Tablas, filtros, acciones inline, espacios reducidos

Con íconos (Icon)

Icon Left · Icon Right · Sin ícono

Button Onboarding

Variante especial para flujos de onboarding. 3 estados: Default, Hover, Pressed. Estilo diferenciado del Button genérico.

Onboarding States

Reglas de uso

✓ Do

Usa Primary para la acción más importante. Máximo 1 por área visual.

Usa Secondary para acciones de soporte (cancelar, volver, alternativas).

El label siempre debe ser un verbo + objeto: “Confirmar dirección”, no solo “OK”.

✕ Don't

No uses 2 botones Primary en la misma sección — genera ambigüedad.

No uses un botón Primary para acciones destructivas — usa un estado especial con color Error.

No uses labels de 1 sola palabra si la acción requiere contexto.

Accesibilidad

Contraste mínimo AA

Primary #2e7e62 sobre blanco: ratio 4.6:1 ✓ · Texto blanco sobre Primary: ratio 4.6:1 ✓

Role semántico

Siempre usar elemento <button> nativo, nunca <div> o <span> con onClick.

Estado disabled

Usar atributo disabled nativo — garantiza que lectores de pantalla lo comuniquen correctamente.

Focus visible

El outline de focus debe ser visible y usar el color primario con offset mínimo de 2px.

Label descriptivo

Para botones con solo ícono, incluir aria-label que describa la acción.

Tokens del componente

Token	Valor	Descripción
`--color-primary-700`	#2e7e62	Background Primary Default
`--color-primary-800`	#1c544d	Background Primary Hover
`--color-primary-900`	#0d3d2e	Background Primary Pressed
`--color-neutral-300`	#cbcbd1	Background Primary Disabled
`--radius-sm`	8px	Border radius del container
`height Large`	48px	Height size Large
`height Medium`	40px	Height size Medium (default)
`height Small`	32px	Height size Small

Referencia Figma

Component Sets en Figma

Button — 108 variantes · Página: ↳Buttons · Propiedades: Type, State, Icon, Size
Button Onboarding — 3 variantes · Propiedades: State (Default, Hover, Pressed)

Abrir en Figma