Button
Los botones son elementos de interacción destinados a disparar acciones. Comunican llamadas a la acción y permiten a estos interactuar con páginas en una variedad de formas.
Variantes
Cada variante del componente botón tiene una función particular. Con el diseño de cada variante queremos significar esa función. Para nosotros es muy importante que las diferentes variantes se implementen de manera consistente en todos nuestros productos.
Visual | Tipo | Descripción |
Primary | Destinado para las acciones de mayor prioridad. | |
Secondary | Complementario al button primary, nunca se muestra de forma aislada. Su uso está destinado a las acciones contrarias a la acción principal. Ej. "Enviar Vs Cancelar" | |
Ghost | Puede ser usado de forma aislada sin acompañamientos de botones Primary o Secondary. El uso de este variante no permite el uso el button primary como acompañamiento en un grupo. |
Racional de aplicación
Utilizamos los botones para disparar acciones que se pueden tomar al interactuar con la página. Como regla general, cada página podría tener un botón principal asociado a la acción más importante. El resto de acciones se representarían con botones que deben transmitir un énfasis menor.
Usa este componente para
Facilitar la interacción con procesos.
Confirmar o enviar información a través de un formulario.
Cancelar la acción.
Restablecimiento de un formulario o un conjunto de datos.
Dar por terminado un proceso o una sección.
Lanzamiento de un pop-over.
Avanzar o retroceder a través de un flujo de pasos.
Buenas prácticas
Uso correcto | Uso incorrecto |
El botón principal en un grupo debe ser primary. | No utilizamos un botón primary para usos secundarios. |
En un grupo de botones todos deben tener el mismo tamaño. | No combinamos distintos tamaños en un grupo de botones. |
El literal del botón debe ser conciso y no contener textos extensos. | Como regla a cumplir, un literal no debe tener mas de dos palabras. |
Utilizamos los componentes tal como se proporcionan. | Evitamos añadir estilos sobre los definidos por el sistema de diseño. |
Interacción
Medio | Uso |
Ratón | Se puede activar un botón haciendo clic en cualquier lugar dentro del contenedor de botones. |
Teclado | Se puede activar un botón presionando Intro o Espacio mientras el botón está enfocado. Para interacciones de teclado adicionales, consulte la pestaña de accesibilidad. |
JAWS | Se puede activar un botón presionando Intro o Espacio mientras el botón está enfocado. |
NVDA | Se puede activar un botón presionando Enter o Espacio mientras el botón está enfocado. |
Contenidos
Al escribir el literal para tus botones, imagina que es una conversación. Utiliza el lenguaje natural que utilizarías en una conversación entre dos personas. Una buena experiencia de usuario imita una conversación verbal entre una persona y una interfaz.
Ejemplos de conversación | Literal |
"Sí, elimina la lista" | Eliminar lista |
"Quiero ver esta información" | Acceder |
"Quiero ver la siguiente imagen" | Siguiente |
"He terminado el formulario" | Enviar |
"Quiero suscribirme a la newsletter" | Subscribi |
Anatomía y variabilidad
Anatomía del componente
En esta versión inicial, el literal está centrado respecto al botón, ya que es el único elemento disponible.
Elemento | Descripción |
A | Contenedor |
B | Etiqueta |
Variabilidad de tamaños
Existen tres tamaños definidos para el componente botón. Un cambio de tamaño puede implicar modificaciones en el tamaño de la fuente, interlineado y espaciado del botón.
Visual | Tamaño | Code |
sm |
| |
md |
| |
lg |
|
Variabilidad de estados
Existen tres tamaños definidos para el componente botón. Un cambio de tamaño puede implicar modificaciones en el tamaño de la fuente, interlineado y espaciado del botón.
Número | Estado | Descripción |
1 | Default | Muestra el elemento disponible para actuar sobre él. |
2 | Hover | Cuando el cursor se posiciona encima. |
3 | Active | Al hacer click se resalta la opción elegida. |
4 | Disabled | No disponible para interactuar. |
Última actualización
