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.
​

Acordeón

Calendar

Última actualización 1yr ago

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.

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.

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.

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

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>`

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.