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
<plural-button-primary variant="sm">Primary</plural-button-primary>
md
<plural-button-primary variant="md">Primary</plural-button-primary>
lg
<plural-button-primary variant="lg">Primary</plural-button-primary>

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 8mo ago