Buttons
El button es el componente que reemplaza el botón html estándar con un tema de diseño y una multitud de Detalle. Se puede usar cualquier clase auxiliar de color para alterar el color de fondo o de texto.
Playground
Sólo se puede usar una opción a la vez de las siguientes:
- Ruby
- Html
- Groovy
<%= btn_primary 'Label' %>
<button class="btn btn-md btn-primary" ><span class="btn-label">Label</span></button>
<g:buttonComponent
id=""
class=""
label="Label"
href=""
data=""
formaction=""
responsive=""
/>
Lista de parámetros
- Ruby
- Groovy
| Parámetro | Tipo | Detalle |
| label | String | texto del botón |
| type | :button, :submit, :reset | define el tipo de botón |
| icon | Symbol | define el icono del botón si contiene |
| responsive | Boolean | Define si el btn será responsive, es decir, sí ocultará el texto y será un btn icon en pantalla sm |
| data | Hash | Información extra que se puede utilizar en el botón |
| href | URL | Ruta o path para generar el link_to |
| disabled | Boolean | Habilita o desabilita el botón |
| formaction | String | Ruta para generar hacer submit alternativo dentro de un form |
| ic | Hash | atributos de intercooler para el botón |
| Parámetro | Tipo | Detalle |
| id | String | Determina el ID dentro del DOM del componente |
| class | String | Determina el CLASS dentro del DOM del componente |
| label | String | Determina la etiqueta del botón |
| type | button | submit | reset | Determina el type del botón |
| ghost | Boolean | Determina si el botón es ghost |
| disabled | Boolean | Determina si el botón se desabilita |
| icon | Symbol | Define el icono del botón si contiene |
| href | URL | Ruta o path para generar el link |
| data | Hash | Información extra que se puede utilizar en el botón |
| formaction | String | Ruta para generar hacer submit alternativo dentro de un form |
| responsive | Boolean | Define si el btn será responsive, es decir, sí ocultará el texto y será un btn icon en pantalla sm |
Anatomía
Label Buttons
1. Label
Texto del botón
2. Icono [opcional]
Use un icono para transmitir más significado.
3. Contenedor
Contiene todos los elementos indicados.
4. Dropdown [opcional]
Contiene la propiedad “dropdown” en caso de requerir mostrar contenido desplegable.
Icons Buttons
1. Icono
Los btn-icon siempre deben llevar un icono que indique acción
3. Contenedor
Contiene todos los elementos indicados.
Casos de uso
| Variante | Propósito |
 | Primary Button Su objetivo principal es incitar y guiar a los usuarios a realizar una acción específica. "Aceptar", "Guardar", "Crear", "Publicar", "Solicitar", "Enviar", entre otros. El texto o etiqueta en el botón CTA principal debe ser claro, conciso y orientado a la acción, transmitiendo la acción específica que el usuario realizará al hacer clic en él. Es recomendable agregar un icono que pueda proporcionar una representación visual clara de la acción que se realizará al hacer clic en el botón. Esto ayuda a identificar rápidamente la acción y refuerza el mensaje del botón. Sin embargo, es importante elegir un icono reconocible y comprensible para evitar confusiones. |
 | Secondary Button Botón Secundario, estética Outline en el caso de Buk, se utilizan para acciones menos prioritarias en una interfaz. Pueden representar acciones como "Cancelar", "Eliminar" o "Regresar" que no requieren la misma atención o importancia que las acciones principales. Ayudan a distinguir acciones de menor prioridad y a mantener una apariencia equilibrada en la interfaz. El uso de ícono es solo para acciones que deseamos reforzar el mensaje del botón, recordar que esta acción debe tener el menor peso visual en la pantalla. |
 | Ghost Button Estos botones se utilizan comúnmente para acciones secundarias o menos destacadas que no requieren el mismo nivel de atención o prioridad que los botones principales, como opciones de visualización o filtrado, botones de alternancia (toggle). El propósito es permitir que los usuarios realicen acciones o interacciones de manera suave y sin interrupciones visuales significativas en la interfaz. |
 | Icon Button Si el espacio en la interfaz es limitado y se desea mantener el botón lo más pequeño posible, un icono puede ayudar a transmitir la acción si es reconocible y comprensible. Por accesibilidad el ícono debe tener 16px de alto como mínimo. Esto es especialmente útil en dispositivos móviles o interfaces con restricciones de espacio. |
 | Dropdown Button Un botón con dropdown debe ser usado cuando hay varias opciones o acciones secundarias relacionadas dentro de un mismo contexto, como en menús de navegación, opciones de filtrado o clasificación, configuraciones y acciones contextuales. Ayuda a organizar y presentar opciones adicionales de manera eficiente, evitando sobrecargar la interfaz con demasiados elementos visibles. Lo ideal para opciones de múltiples, debería ser un botón secundario |
 | Danger Button Al usar un botón tipo "Danger", se debe tener en cuenta la irreversibilidad de la acción. Además siempre proporcionar confirmación adicional y en una ubicación visible pero no demasiado prominente. Esto evita que los usuarios realicen accidentalmente acciones destructivas. |
 | Disabled Button La deshabilitación de un botón puede deberse a condiciones previas no cumplidas, datos faltantes o errores en el formulario, o la necesidad de completar ciertas acciones o pasos antes de habilitar el botón. El propósito principal de mostrar un botón deshabilitado es comunicar visualmente a los usuarios que la opción o acción asociada aún no está disponible. |
Botón con tooltip
Para implementar un botón con tooltip que pueda desplegar más información, dentro del parámetro data le podemos entregar la key toggle con valor tooltip. De esta forma, al poner el mouse sobre el botón, se desplegará un tooltip que muestra el título del botón.
Si es que se quiere desplegar un tooltip sobre un botón deshabilitado, debido a una limitante de bootstrap, debes envolver el botón en una etiqueta span y a este wrapper aplicar el data-toggle="tooltip" y data-title="title" respectivamente.