Links

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 1yr ago