import { Story, Canvas, Preview, ArgsTable } from '@storybook/addon-docs'; import imageB1 from '../../stories/assets/button/btn-primary.png'; import imageB2 from '../../stories/assets/button/btn-secondary.png'; import imageB3 from '../../stories/assets/button/btn-tertiary.png'; import imageB4 from '../../stories/assets/button/btn-danger.png'; import imageB5 from '../../stories/assets/button/btn-ghost.png'; import imageB6 from '../../stories/assets/button/boton_estados.png'; import imageB7 from '../../stories/assets/button/boton_posicion-1.png'; import imageB8 from '../../stories/assets/button/boton_anatomia_varios_botones_juntos.png'; import imageB9 from '../../stories/assets/button/boton_anatomia_alturas.png'; import imageB10 from '../../stories/assets/button/boton_anatomia_2.png'; import imageB11 from '../../stories/assets/button/boton_anatomia_1.png'; import imageB12 from '../../stories/assets/button/boton_primario_48px.png'; import imageB13 from '../../stories/assets/button/boton_primario_40x.png'; import imageB14 from '../../stories/assets/button/boton_primario_32px.png'; # Botón / Button Los botones se usan para dar una orden que ejecuta una **acción** permitiendo interactuar con los productos digitales. Se usan botones por ejemplo para enviar datos de un formulario o marcar la finalización de una tarea (enviar, guardar, aceptar, solicitar alta), indicar el siguiente paso en un proceso de varios pasos (continuar), interrumpir un proceso de entrada de datos (cancelar, borrar), descargar documentos (descargar solicitud), etc. El botón no es un elemento de navegación, ni se debe usar para acceder a un contenido. En este caso se emplearán los enlaces (links). ### Variaciones Los botones se usan para comunicar acciones. Cada variante del botón tiene una función particular, que debe mantenerse consistente a lo largo de todo el producto. | **Botón primario **(primary button) | **Botón secundario **(secondary button) | **Botón terciario **(terciary button) | | ------------------------------------------------------- | --------------------------------------------------------- | ------------------------------------------------------- | |

| | **Botón de peligro **(danger button) | **Botón fantasma **(ghost button) | | | ------------------------------------------------------- | ------------------------------------------------------- | |

| Cada página tendrá un único **botón primario** para la acción principal. El resto de acciones se indican con botones de menor énfasis. Se usará el botón primario para indicar cómo completar esa acción principal de la página. El **botón secundario** se usa para presentar una acción alternativa a la principal (por ejemplo, cancelar o volver). Puede haber más de un botón secundario y, en general, tienen todos una acción asociada negativa. El botón secundario siempre va asociado al primario, no se debe usar un botón secundario aislado. El **botón terciario** es menos prominente y puede presentarse en solitario o asociado a uno primario. Se usa cuando hay varias acciones posibles dentro de la misma página para representar aquellas menos importantes, o para subtareas de la acción representada en el botón primario. El **botón fantasma** es el menos prominente de todos y habitualmente complementa las acciones de los botones más importantes. El **botón de peligro** se utiliza exclusivamente para acciones que tienen un efecto potencialmente destructivo sobre los datos del usuario. Adicionalmente, todos estos botones presentan variaciones de **altura**, siendo el botón por defecto el medio y presentándose una opción más alta y otra más estrecha. | **Botón estrecho ** | **Botón medio **(por defecto) | **Botón alto ** | | ------------------------------------- | ----------------------------------------------- | -------------------------------- | |

| Normalmente usaremos el botón por defecto, aunque hay ciertas excepciones como en casos donde se quiere destacar significativamente una acción y donde se puede usar un botón más alto, o donde el botón esté insertado en un párrafo de texto o haya problemas de espacio que se puede usar un botón más estrecho. No se debe mezclar en la misma página botones de distintas alturas. Su uso depende de cada caso aunque debe ser consistente a lo largo del producto. ### Contenido La **etiqueta** del botón expresa la acción que ocurrirá cuando el usuario pulsa el botón. Es recomendable que las etiquetas de los botones sean verbos para indicar la acción o un verbo con un sustantivo para indicar acción y contexto, mejor que sustantivos. Por ejemplo para pasar de un paso a otro en un proceso largo, es preferible usar “continuar” o “continuar al siguiente paso” que “siguiente paso”. Es recomendable que el texto sea breve y conciso puesto que botones con un texto largo facilitan la comprensión pero destruyen el ritmo visual. ### Anatomía La tipografía del **texto** de la etiqueta es la del cuerpo por defecto, Lato 16px Regular. Se puede usar una tipografía mayor para botones más altos que el estándar con el objeto de destacar significativamente una acción. Los botones tienen una **anchura** variable según el tamaño de la etiqueta, estando estos elementos centrados dentro del botón y debiéndose respetar los paddings de 16px a cada lado indicados.

Es posible utilizar un **icono** representativo en vez de la etiqueta, o incluso una combinación de etiqueta con icono, para enfatizar visualmente una acción. El tamaño del icono debe estar en concordancia con el del texto y el tamaño del botón siendo recomendable iconos de 16px.

El uso de iconos solo está recomendado para aquellos casos que las acciones sean estándar dentro de los productos y su representación perfectamente reconocible por cualquier usuario. Pueden darse casos en que el botón tenga un ancho fijo, provocado por el alineamiento del mismo dentro de un componente o dentro de la rejilla. En ese caso se adaptará el ancho al tamaño requerido y se mantienen los elementos interiores del botón centrados dentro del componente. Los botones se pueden presentar en 3 formatos según su **altura**. El botón por defecto tiene un alto de 40px, el más alto de 48px y el más estrecho de 32px.

Cuando se da una **agrupación** de botones, todos mantendrán un mismo tamaño, impuesto por aquel con la etiqueta de mayor tamaño. Se debe respetar en todo caso la distancia de 16px entre botones.

### Posición Típicamente **alinearemos** los botones horizontalmente a la derecha de la página, siendo el botón principal el situado en la posición primera a la derecha. Seguidamente, de derecha a izquierda, se colocarán los botones secundarios y terciarios con el correspondiente margen entre elementos.

Los botones pueden estar contenidos en otros componentes, y su posición depende de cómo se definan estos, aunque típicamente su posicionamiento será a la derecha dentro de los mismos y siguiendo la misma norma de relevancia. ### Comportamiento El botón se puede **activar** tanto con ratón (mediante clicc), teclado (mediante “enter” o “espacio”) o lectores de pantalla. Los botones pueden presentarse en distintos **estados**: enabled, hover, active, focus y disabled.