Variantes y propiedades

Propiedad Valores / notas Descripción
_state • default
• hover
• active
• focus-visible Interno de Figma
type • primary — Acción principal (CTA). Pagar, Transferir, Continuar.
• secondary — Opuesta a la primaria o neutra. Volver, Cancelar.
• tertiary — Acción adicional cuando ya existen primaria y secundaria. Imprimir, Descargar.
• danger — Acción destructiva o irreversible. Eliminar, Bloquear tarjeta.
• warning — Acción sensible o flujo incompleto. Suspender, Verificar.
• secondary-tinted — Variante de secondary con tinte de color.
size • md — Por defecto. Acciones principales en un flujo.
• sm — Acciones menores o anidadas en componentes con espacio reducido (tablas, formularios).
disabled • false — Por defecto.
• true — Deshabilitado mientras el sistema ejecuta un proceso. En formularios se recomienda mantenerlo activo y validar al presionar, para facilitar la identificación de errores.
isLoading • false — Por defecto.
• true — La acción se está ejecutando de forma asíncrona; el usuario puede seguir interactuando con el resto de la UI.
iconPlacement • left — Por defecto. Icono a la izquierda del label.
• right — Icono a la derecha del label.
icon
label string — Texto de la acción. Usar verbos en infinitivo que indiquen claramente qué ocurrirá al soltar el botón. Si excede el espacio de una línea, se trunca con elipses.

Si el componente tiene estados, interacciones o animaciones no obvias, descríbelas aquí como notas adicionales debajo de la tabla.

Hacer y no hacer

Enfócate en errores comunes reales y en cuándo usar otro componente. Menos "best practices" genéricas, más "esto nos pasó y así se resuelve".

<aside> 😄

Hacer: Botones con acciones claras y honestas que indican claramente qué ocurre después de soltar el botón. Pagar, Transferir, Enviar, Guardar.

</aside>

<aside> 🤨

No hacer: Botones con acciones ambiguas, inexactas o redundantes. ¡Me encanta!, Transferir (cuando no transfiere de inmediato porque existen pasos posteriores), Pide el Crédito de Consumo, Continuar al paso siguiente, Haz clic aquí.

Esto aumenta la probabilidad de que el usuario ejecute una acción por error al no tener suficiente contexto.

Las acciones redundantes o demasiado específicas aumentan la probabilidad de que el texto se recorte en dispositivos pequeños o usuarios con ajustes de accesibilidad.

</aside>

Accesibilidad

Solo si hay algo que el dev necesita implementar manualmente. Si el componente ya lo resuelve internamente, indica "Manejado internamente por el componente."

Los botones siempre deben estar incluidos en el flujo de foco en la navegación por teclado o interruptores, y utilizar el estado focus-visible en las plataformas que lo permitan.

Notas

Comportamientos conocidos