Botones y grupos de botones

Botones básicos y estilos predefinidos

Los botones representan uno de los elementos de interacción más importantes en cualquier interfaz web. Bootstrap proporciona un sistema completo y consistente para crear botones atractivos y funcionales que mantienen la coherencia visual en toda la aplicación.

Creación de botones básicos

Para crear un botón básico en Bootstrap, simplemente aplicamos la clase .btn junto con una clase de color semántico. La clase base .btn proporciona el estilo fundamental, mientras que las clases de color definen la apariencia visual:

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>

La clase base .btn es obligatoria y debe combinarse siempre con una clase de color para obtener el estilo completo. Sin la clase de color, el botón no tendrá la apariencia característica de Bootstrap.

Estilos predefinidos de colores

Bootstrap ofrece una paleta completa de colores semánticos que ya conoces de las utilidades básicas, adaptados específicamente para botones:

<!-- Colores principales -->
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>

<!-- Colores de estado -->
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-info">Info</button>

<!-- Colores neutros -->
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

Cada color semántico transmite un significado específico:

• Primary: Acción principal o más importante
• Secondary: Acciones secundarias o alternativas
• Success: Confirmaciones o acciones exitosas
• Warning: Advertencias o precauciones
• Danger: Acciones destructivas o críticas
• Info: Información adicional o ayuda

Variante outline para botones

Bootstrap incluye una variante outline que proporciona botones con bordes coloreados pero fondo transparente, ideal para acciones secundarias:

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>

Los botones outline mantienen la misma semántica de colores pero con una apariencia más sutil, perfecta para crear jerarquías visuales donde necesitas botones menos prominentes que los sólidos.

Diferentes elementos HTML como botones

Bootstrap permite aplicar estilos de botón a diferentes elementos HTML según tus necesidades específicas:

Elemento <button> (recomendado para acciones):

<button type="button" class="btn btn-primary">Botón elemento button</button>
<button type="submit" class="btn btn-success">Enviar formulario</button>

Enlaces <a> como botones:

<a class="btn btn-primary" href="#" role="button">Enlace como botón</a>
<a class="btn btn-outline-secondary" href="/contacto" role="button">Ir a contacto</a>

Inputs de formulario:

<input type="button" class="btn btn-primary" value="Input button">
<input type="submit" class="btn btn-success" value="Enviar">
<input type="reset" class="btn btn-outline-warning" value="Limpiar">

Cuándo usar cada elemento

La elección del elemento HTML depende de la función que cumplirá:

• <button>: Para acciones que ejecutan JavaScript, envío de formularios, o cualquier interacción que no implique navegación
• <a>: Para navegación entre páginas o secciones, siempre incluyendo el atributo role="button" para accesibilidad
• <input>: Específicamente para formularios cuando necesitas botones de envío, reset, o acciones relacionadas con el formulario

Ejemplo práctico combinado

Aquí tienes un ejemplo completo que muestra diferentes tipos de botones trabajando juntos:

<div class="container">
  <h3>Acciones principales</h3>
  <button type="button" class="btn btn-primary">Crear nuevo</button>
  <button type="button" class="btn btn-success">Guardar cambios</button>
  
  <h3 class="mt-4">Acciones secundarias</h3>
  <button type="button" class="btn btn-outline-secondary">Cancelar</button>
  <a class="btn btn-outline-primary" href="/ayuda" role="button">Ver ayuda</a>
  
  <h3 class="mt-4">Acciones críticas</h3>
  <button type="button" class="btn btn-danger">Eliminar</button>
  <button type="button" class="btn btn-outline-warning">Deshacer</button>
</div>

Esta combinación demuestra cómo usar diferentes estilos para crear una jerarquía visual clara: botones sólidos para acciones principales, outline para acciones secundarias, y colores semánticos apropiados según la función de cada botón.

Tamaños, estados y variaciones de botones

Bootstrap proporciona un sistema flexible de dimensiones y estados que permite adaptar los botones a diferentes contextos y necesidades de interfaz, manteniendo siempre la coherencia visual del framework.

Tamaños de botones predefinidos

Los tamaños de botones se controlan mediante clases específicas que modifican el padding, font-size y border-radius automáticamente:

Botón grande (.btn-lg):

<button type="button" class="btn btn-primary btn-lg">Botón grande</button>
<button type="button" class="btn btn-outline-success btn-lg">Outline grande</button>

Botón tamaño por defecto (sin clase adicional):

<button type="button" class="btn btn-primary">Botón normal</button>
<button type="button" class="btn btn-secondary">Tamaño estándar</button>

Botón pequeño (.btn-sm):

<button type="button" class="btn btn-primary btn-sm">Botón pequeño</button>
<button type="button" class="btn btn-outline-warning btn-sm">Outline pequeño</button>

Los diferentes tamaños mantienen las proporciones visuales adecuadas y son especialmente útiles para crear jerarquías de importancia o adaptarse a espacios limitados en la interfaz.

Ejemplo comparativo de tamaños

<div class="d-flex align-items-center gap-3">
  <button type="button" class="btn btn-primary btn-lg">Grande</button>
  <button type="button" class="btn btn-primary">Normal</button>
  <button type="button" class="btn btn-primary btn-sm">Pequeño</button>
</div>

Estados de botones

Bootstrap incluye clases de estado que modifican la apariencia visual y el comportamiento de los botones para proporcionar retroalimentación clara al usuario.

Estado activo (.active):

<button type="button" class="btn btn-primary active">Botón activo</button>
<button type="button" class="btn btn-outline-secondary active">Outline activo</button>

El estado activo simula visualmente que el botón está presionado o seleccionado, útil para indicar el elemento actual en navegaciones o toggles.

Estado deshabilitado (disabled):

<!-- Con atributo disabled -->
<button type="button" class="btn btn-primary" disabled>Botón deshabilitado</button>

<!-- Con clase .disabled para enlaces -->
<a class="btn btn-secondary disabled" role="button">Enlace deshabilitado</a>

Los botones deshabilitados tienen una apariencia atenuada y no responden a eventos de interacción, indicando claramente que la acción no está disponible.

Combinación de tamaños y estados

Puedes combinar libremente las clases de tamaño con los estados para obtener exactamente la apariencia que necesitas:

<!-- Botones grandes con diferentes estados -->
<button type="button" class="btn btn-success btn-lg active">Activo grande</button>
<button type="button" class="btn btn-danger btn-lg" disabled>Deshabilitado grande</button>

<!-- Botones pequeños con estados -->
<button type="button" class="btn btn-info btn-sm active">Activo pequeño</button>
<button type="button" class="btn btn-warning btn-sm" disabled>Deshabilitado pequeño</button>

Botones de ancho completo

Para crear botones que ocupen todo el ancho disponible de su contenedor, utiliza las utilidades de dimensión que ya conoces:

<button type="button" class="btn btn-primary w-100">Botón ancho completo</button>
<button type="button" class="btn btn-outline-success w-100 mt-2">Otro botón completo</button>

Variaciones especiales

Botón de solo texto (.btn-link):

<button type="button" class="btn btn-link">Botón enlace</button>

El botón link elimina el fondo y los bordes, manteniendo solo el color y el comportamiento de hover, ideal para acciones que deben parecer enlaces pero mantener la funcionalidad de botón.

Botones sin bordes redondeados:

<button type="button" class="btn btn-primary rounded-0">Sin bordes redondeados</button>
<button type="button" class="btn btn-success rounded-pill">Completamente redondeado</button>

Ejemplo práctico completo

Aquí tienes un ejemplo integral que muestra las diferentes combinaciones en un contexto real:

<div class="container">
  <!-- Sección de acciones principales -->
  <div class="mb-4">
    <h4>Panel de control</h4>
    <button type="button" class="btn btn-primary btn-lg">Crear proyecto</button>
    <button type="button" class="btn btn-outline-primary btn-lg active">Dashboard</button>
    <button type="button" class="btn btn-secondary btn-lg" disabled>Configuración</button>
  </div>
  
  <!-- Formulario con botones de diferentes tamaños -->
  <div class="mb-4">
    <h4>Acciones del formulario</h4>
    <button type="button" class="btn btn-success">Guardar</button>
    <button type="button" class="btn btn-outline-secondary">Cancelar</button>
    <button type="button" class="btn btn-link btn-sm">¿Necesitas ayuda?</button>
  </div>
  
  <!-- Botones de ancho completo para móviles -->
  <div class="d-grid gap-2">
    <button type="button" class="btn btn-warning btn-lg">Acción principal móvil</button>
    <button type="button" class="btn btn-outline-warning">Acción secundaria móvil</button>
  </div>
</div>

Esta implementación práctica demuestra cómo los diferentes tamaños y estados crean una jerarquía visual clara, desde acciones principales prominentes hasta elementos de ayuda discretos, adaptándose perfectamente a diferentes contextos de uso.

Grupos de botones y toolbars

Los grupos de botones permiten agrupar múltiples botones relacionados en una unidad visual cohesiva, creando interfaces más organizadas y profesionales. Bootstrap proporciona un sistema completo para crear estas agrupaciones manteniendo la consistencia visual y la funcionalidad.

Grupo básico de botones

Para crear un grupo básico, utiliza la clase .btn-group como contenedor y coloca los botones individuales dentro:

<div class="btn-group" role="group">
  <button type="button" class="btn btn-primary">Izquierda</button>
  <button type="button" class="btn btn-primary">Centro</button>
  <button type="button" class="btn btn-primary">Derecha</button>
</div>

Los botones dentro del grupo se fusionan visualmente, eliminando los espacios entre ellos y ajustando automáticamente los bordes redondeados para crear una apariencia unificada.

Grupos con diferentes estilos de botones

Puedes combinar diferentes estilos de botones dentro del mismo grupo para crear jerarquías visuales:

<div class="btn-group" role="group">
  <button type="button" class="btn btn-outline-primary">Opción 1</button>
  <button type="button" class="btn btn-primary active">Seleccionada</button>
  <button type="button" class="btn btn-outline-primary">Opción 3</button>
</div>

Esta combinación es especialmente útil para crear controles de selección donde una opción está activa mientras las demás permanecen disponibles.

Grupos de botones verticales

Para organizar botones en disposición vertical, utiliza la clase .btn-group-vertical:

<div class="btn-group-vertical" role="group">
  <button type="button" class="btn btn-secondary">Primer botón</button>
  <button type="button" class="btn btn-secondary">Segundo botón</button>
  <button type="button" class="btn btn-secondary">Tercer botón</button>
</div>

Los grupos verticales son ideales para menús laterales, paneles de configuración, o cuando el espacio horizontal es limitado.

Tamaños en grupos de botones

Los grupos de botones respetan las clases de tamaño que apliques a los botones individuales:

<!-- Grupo de botones grandes -->
<div class="btn-group" role="group">
  <button type="button" class="btn btn-primary btn-lg">Grande 1</button>
  <button type="button" class="btn btn-primary btn-lg">Grande 2</button>
  <button type="button" class="btn btn-primary btn-lg">Grande 3</button>
</div>

<!-- Grupo de botones pequeños -->
<div class="btn-group mt-3" role="group">
  <button type="button" class="btn btn-info btn-sm">Pequeño 1</button>
  <button type="button" class="btn btn-info btn-sm">Pequeño 2</button>
  <button type="button" class="btn btn-info btn-sm">Pequeño 3</button>
</div>

Botones radio en grupos

Para crear controles de selección similar a botones radio, combina grupos de botones con estados activos:

<div class="btn-group" role="group">
  <input type="radio" class="btn-check" name="opciones" id="opcion1" checked>
  <label class="btn btn-outline-primary" for="opcion1">Opción 1</label>
  
  <input type="radio" class="btn-check" name="opciones" id="opcion2">
  <label class="btn btn-outline-primary" for="opcion2">Opción 2</label>
  
  <input type="radio" class="btn-check" name="opciones" id="opcion3">
  <label class="btn btn-outline-primary" for="opcion3">Opción 3</label>
</div>

Esta implementación crea un grupo donde solo una opción puede estar seleccionada, manteniendo la funcionalidad nativa de los inputs radio con la apariencia de botones.

Botones checkbox en grupos

De forma similar, puedes crear grupos de checkbox para selección múltiple:

<div class="btn-group" role="group">
  <input type="checkbox" class="btn-check" id="check1">
  <label class="btn btn-outline-success" for="check1">Opción A</label>
  
  <input type="checkbox" class="btn-check" id="check2">
  <label class="btn btn-outline-success" for="check2">Opción B</label>
  
  <input type="checkbox" class="btn-check" id="check3">
  <label class="btn btn-outline-success" for="check3">Opción C</label>
</div>

Toolbars de botones

Las toolbars combinan múltiples grupos de botones en una sola unidad funcional, ideal para barras de herramientas complejas:

<div class="btn-toolbar" role="toolbar">
  <!-- Grupo de acciones principales -->
  <div class="btn-group me-2" role="group">
    <button type="button" class="btn btn-primary">Nuevo</button>
    <button type="button" class="btn btn-primary">Editar</button>
    <button type="button" class="btn btn-primary">Eliminar</button>
  </div>
  
  <!-- Grupo de acciones de formato -->
  <div class="btn-group me-2" role="group">
    <button type="button" class="btn btn-outline-secondary">Negrita</button>
    <button type="button" class="btn btn-outline-secondary">Cursiva</button>
    <button type="button" class="btn btn-outline-secondary">Subrayado</button>
  </div>
  
  <!-- Grupo individual -->
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-info">Ayuda</button>
  </div>
</div>

Toolbar con espaciado personalizado

Puedes controlar el espaciado entre grupos dentro de una toolbar usando las utilidades de margen:

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group me-3" role="group">
    <button type="button" class="btn btn-success">Guardar</button>
    <button type="button" class="btn btn-success">Guardar como</button>
  </div>
  
  <div class="btn-group me-4" role="group">
    <button type="button" class="btn btn-warning">Deshacer</button>
    <button type="button" class="btn btn-warning">Rehacer</button>
  </div>
  
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-danger">Cerrar</button>
  </div>
</div>

Ejemplo práctico: Panel de administración

<div class="container">
  <h4>Panel de gestión de usuarios</h4>
  
  <!-- Toolbar principal -->
  <div class="btn-toolbar mb-4" role="toolbar">
    <div class="btn-group me-2" role="group">
      <button type="button" class="btn btn-primary">Crear usuario</button>
      <button type="button" class="btn btn-outline-primary">Importar</button>
      <button type="button" class="btn btn-outline-primary">Exportar</button>
    </div>
    
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-outline-secondary">Configuración</button>
    </div>
  </div>
  
  <!-- Filtros como grupo de botones radio -->
  <div class="mb-3">
    <label class="form-label">Filtrar por estado:</label>
    <div class="btn-group" role="group">
      <input type="radio" class="btn-check" name="estado" id="todos" checked>
      <label class="btn btn-outline-info" for="todos">Todos</label>
      
      <input type="radio" class="btn-check" name="estado" id="activos">
      <label class="btn btn-outline-info" for="activos">Activos</label>
      
      <input type="radio" class="btn-check" name="estado" id="inactivos">
      <label class="btn btn-outline-info" for="inactivos">Inactivos</label>
    </div>
  </div>
  
  <!-- Acciones por fila en vertical -->
  <div class="d-flex">
    <div class="btn-group-vertical me-3" role="group">
      <button type="button" class="btn btn-outline-success btn-sm">Ver</button>
      <button type="button" class="btn btn-outline-warning btn-sm">Editar</button>
      <button type="button" class="btn btn-outline-danger btn-sm">Eliminar</button>
    </div>
    
    <div class="flex-grow-1">
      <p class="text-muted">Selecciona un usuario de la tabla para ver las acciones disponibles.</p>
    </div>
  </div>
</div>

Este ejemplo completo demuestra cómo los grupos de botones y toolbars crean interfaces organizadas y funcionales, desde barras de herramientas complejas hasta controles de filtrado intuitivos, manteniendo siempre la coherencia visual característica de Bootstrap.