Button

Es el componente primario para ejecutar acciones en la interfaz. Permite iniciar procesos, confirmar acciones, cancelar tareas o navegar a estados posteriores en un flujo. Puede representar acciones primarias, secundarias o semánticas como éxito, advertencia o peligro según su configuración de severidad.

Propósito

Usa button cuando la interfaz requiere que el usuario realice una acción explícita como:

Enviar o guardar datos
Confirmar procesos
Cancelar o volver
Disparar una transición de estado

Variantes

Estas modifican el tratamiento visual del botón.

Default (Filled)
Outlined
Link

Variantes por severidad

La gravedad define el tipo de botón.

Severidad	Propósito	Nivel jerárquico
1. Primary	Acción principal del flujo	Alto
2. Secondary	Acción alternativa	Medio
3. Success	Confirmación positiva	Medio
4. Info	Acción informativa	Medio
5. Warning	Acción con precaución	Alto
6. Danger	Acción destructiva	Crítico
7. Contrast	Alto contraste accesible	Contextual

Anatomía

El componente button está compuesto por varios elementos internos que trabajan en conjunto para comunicar una acción, permitir la interacción y proporcionar retroalimentación visual al usuario.

Cada parte cumple una función específica dentro de la experiencia.

Container
Label text
Icon left (opcional)
Icon Right (opcional)

Tamaños y medidas

Medidas de relleno y tamaño de cada botón.

Small
Normal
Large

Tamaño	Altura	Padding (X)	Padding (Y)
Small	27.5px	8px	5px
Normal	33px	10px	7px
Large	39px	12px	8px

Tamaño de las esquinas

Medidas de relleno y tamaño de cada botón.

Tipo	Tamaño	Radio de esquina
1. Rounded button	Small - Normal - Large	28px/1.75 rem
2. Square button	Small - Normal - Large	6px/0.375 rem

Estados

Los estados visuales permiten que el botón comunique su situación actual y la respuesta del sistema frente a la interacción del usuario.

Default
Hover
Focus
Active
Disabled
Loading

Estado	Comportamiento
Default	Superficie interactiva en reposo, lista para usarse
Hover	Indica que el botón puede ser presionado (cuando el cursor pasa sobre él).
Focus	Muestra que el botón está seleccionado mediante teclado.
Active	Proporciona feedback visual mientras se está presionando.
Disabled	Indica que no está disponible para interacción.
Loading	Señala que una acción está en proceso y bloquea nuevas interacciones.

Acciones primarias

Las acciones primarias son la opción principal de una vista, flujo o contenedor.

Características

Fondo sólido con color primario
Contraste alto
Elevada prominencia visual
Dominancia en composición.

Es el punto de mayor peso visual y jerárquico dentro del sistema.

Acciones secundarias

Las acciones secundarias son las opciones alternativas o complementaria a la principal.

Características

Estilo outline o menor peso visual.
No domina la composición.
Claramente diferenciable del primary.

Reduce fricción en la toma de decisiones al ofrecer una alternativa clara sin desplazar el foco de acción principal.

Usos recomendados

Uso correcto

Botón “Cancelar” como acción secundaria y botón “Aceptar” como acción primaria en un formulario.

Uso incorrecto

Presentar dos botones con jerarquía primaria cuando uno corresponde a una acción secundaria, como “Volver”.