Saltar al contenido principal Saltar a la navegación de la documentación
¡Hay una versión más nueva de Bootstrap!
Ver en GitHub

Buttons

Usa los estilos personalizados de botones de Bootstrap para acciones en formularios, diálogos y más, con soporte para múltiples tamaños, estados y más.

On this page

Ejemplos

Bootstrap incluye varios estilos de botón predefinidos, cada uno con su propio propósito semántico, con algunos extras para mayor control.

<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>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>
Transmisión de significado a tecnologías asistivas

Usar color para añadir significado solo proporciona una indicación visual, que no será transmitida a los usuarios de tecnologías asistivas – como los lectores de pantalla. Asegúrate de que la información denotada por el color sea evidente desde el contenido mismo (ej. el texto visible), o se incluya mediante medios alternativos, como texto adicional oculto con la clase .visually-hidden.

Deshabilitar el ajuste de texto

Si no quieres que el texto del botón se ajuste, puedes añadir la clase .text-nowrap al botón. En Sass, puedes configurar $btn-white-space: nowrap para deshabilitar el ajuste de texto en cada botón.

Etiquetas de botón

Las clases .btn están diseñadas para usarse con el elemento <button>. Sin embargo, también puedes usar estas clases en elementos <a> o <input> (aunque algunos navegadores pueden aplicar una renderización ligeramente diferente).

Cuando se usan clases de botón en elementos <a> que se usan para activar funcionalidad dentro de la página (como colapsar contenido), en lugar de enlazar a nuevas páginas o secciones dentro de la página actual, estos enlaces deben recibir un role="button" para transmitir adecuadamente su propósito a tecnologías asistivas como los lectores de pantalla.

Enlace 
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Botones con contorno

¿Necesitas un botón, pero no los llamativos colores de fondo que traen? Reemplaza las clases modificadoras por defecto con las .btn-outline-* para eliminar todas las imágenes de fondo y colores en cualquier botón.

<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>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
Algunos de los estilos de botón usan un color de primer plano relativamente claro, y solo deben usarse sobre un fondo oscuro para tener suficiente contraste.

Tamaños

¿Quieres botones más grandes o más pequeños? Añade .btn-lg o .btn-sm para tamaños adicionales.

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Estado deshabilitado

Haz que los botones parezcan inactivos añadiendo el atributo booleano disabled a cualquier elemento <button>. Los botones deshabilitados tienen pointer-events: none aplicado, lo que evita que se activen los estados hover y active.

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

Los botones deshabilitados que usan el elemento <a> se comportan de manera un poco diferente:

  • Los <a> no soportan el atributo disabled, así que debes añadir la clase .disabled para que parezca visualmente deshabilitado.
  • Se incluyen algunos estilos orientados al futuro para deshabilitar todos los pointer-events en los botones de tipo anchor.
  • Los botones deshabilitados deben incluir el atributo aria-disabled="true" para indicar el estado del elemento a las tecnologías asistivas.
Enlace primary Enlace 
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

La clase .disabled usa pointer-events: none para intentar deshabilitar la funcionalidad de enlace de los <a>, pero esa propiedad CSS aún no está estandarizada. Además, incluso en los navegadores que soportan pointer-events: none, la navegación por teclado no se ve afectada, lo que significa que los usuarios de teclado videntes y los usuarios de tecnologías asistivas aún podrán activar estos enlaces. Así que para estar seguro, además de aria-disabled="true", incluye también un atributo tabindex="-1" en estos enlaces para evitar que reciban foco del teclado, y usa JavaScript personalizado para deshabilitar su funcionalidad por completo.

Botones en bloque

Crea pilas responsive de "botones en bloque" de ancho completo como los de Bootstrap 4 con una mezcla de nuestras utilidades display y gap. Al usar utilidades en lugar de clases específicas de botón, tenemos mucho mayor control sobre el espaciado, alineación y comportamientos responsive.

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Aquí creamos una variación responsive, comenzando con botones apilados verticalmente hasta el breakpoint md, donde .d-md-block reemplaza la clase .d-grid, anulando así la utilidad gap-2. Redimensiona tu navegador para verlos cambiar.

<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Puedes ajustar el ancho de tus botones en bloque con clases de ancho de columnas grid. Por ejemplo, para un "botón en bloque" de medio ancho, usa .col-6. Céntralo horizontalmente con .mx-auto también.

<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Se pueden usar utilidades adicionales para ajustar la alineación de los botones cuando están horizontales. Aquí hemos tomado nuestro ejemplo responsive anterior y añadido algunas utilidades flex y una utilidad margin en el botón para alinear a la derecha los botones cuando ya no están apilados.

<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-primary me-md-2" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Plugin de botones

El plugin de botones permite crear simples toggle buttons de encendido/apagado.

Visualmente, estos toggle buttons son idénticos a los checkbox toggle buttons. Sin embargo, son transmitidos de manera diferente por las tecnologías asistivas: los toggles de checkbox serán anunciados por los lectores de pantalla como "marcado"/"no marcado" (ya que, a pesar de su apariencia, fundamentalmente siguen siendo checkboxes), mientras que estos toggle buttons serán anunciados como "botón"/"botón presionado". La elección entre estos dos enfoques dependerá del tipo de toggle que estés creando, y si el toggle tendrá sentido para los usuarios cuando se anuncie como un checkbox o como un botón real.

Estados toggle

Añade data-bs-toggle="button" para alternar el estado active de un botón. Si estás pre-activando un botón, debes añadir manualmente la clase .active y aria-pressed="true" para asegurar que se transmita adecuadamente a las tecnologías asistivas.

<button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button>
Toggle link Toggle link activo Toggle link deshabilitado 
<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

Métodos

Puedes crear una instancia de botón con el constructor de botón, por ejemplo:

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
Método Descripción
toggle Alterna el estado push. Le da al botón la apariencia de haber sido activado.
dispose Destruye el botón de un elemento. (Elimina los datos almacenados en el elemento DOM)
getInstance Método estático que permite obtener la instancia de botón asociada a un elemento DOM, puedes usarlo así: bootstrap.Button.getInstance(element)
getOrCreateInstance Método estático que devuelve una instancia de botón asociada a un elemento DOM o crea una nueva en caso de que no estuviera inicializada. Puedes usarlo así: bootstrap.Button.getOrCreateInstance(element)

Por ejemplo, para alternar todos los botones

var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
  var button = new bootstrap.Button(button)
  button.toggle()
})

Sass

Variables

$btn-padding-y:               $input-btn-padding-y;
$btn-padding-x:               $input-btn-padding-x;
$btn-font-family:             $input-btn-font-family;
$btn-font-size:               $input-btn-font-size;
$btn-line-height:             $input-btn-line-height;
$btn-white-space:             null; // Set to `nowrap` to prevent text wrapping

$btn-padding-y-sm:            $input-btn-padding-y-sm;
$btn-padding-x-sm:            $input-btn-padding-x-sm;
$btn-font-size-sm:            $input-btn-font-size-sm;

$btn-padding-y-lg:            $input-btn-padding-y-lg;
$btn-padding-x-lg:            $input-btn-padding-x-lg;
$btn-font-size-lg:            $input-btn-font-size-lg;

$btn-border-width:            $input-btn-border-width;

$btn-font-weight:             $font-weight-normal;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width:             $input-btn-focus-width;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow;
$btn-disabled-opacity:        .65;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);

$btn-link-color:              $link-color;
$btn-link-hover-color:        $link-hover-color;
$btn-link-disabled-color:     $gray-600;

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           $border-radius;
$btn-border-radius-sm:        $border-radius-sm;
$btn-border-radius-lg:        $border-radius-lg;

$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$btn-hover-bg-shade-amount:       15%;
$btn-hover-bg-tint-amount:        15%;
$btn-hover-border-shade-amount:   20%;
$btn-hover-border-tint-amount:    10%;
$btn-active-bg-shade-amount:      20%;
$btn-active-bg-tint-amount:       20%;
$btn-active-border-shade-amount:  25%;
$btn-active-border-tint-amount:   10%;

Mixins

Hay tres mixins para botones: mixins de variante de botón y de contorno de botón (ambos basados en $theme-colors), más un mixin de tamaño de botón.

@mixin button-variant(
  $background,
  $border,
  $color: color-contrast($background),
  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  $hover-color: color-contrast($hover-background),
  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  $active-color: color-contrast($active-background),
  $disabled-background: $background,
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;
  @include box-shadow($btn-box-shadow);

  &:hover {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
  }

  .btn-check:focus + &,
  &:focus {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
    @if $enable-shadows {
      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
    } @else {
      // Avoid using mixin so we can pass custom focus shadow properly
      box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
    }
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  .show > &.dropdown-toggle {
    color: $active-color;
    background-color: $active-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $disabled-color;
    background-color: $disabled-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    border-color: $disabled-border;
  }
}

@mixin button-outline-variant(
  $color,
  $color-hover: color-contrast($color),
  $active-background: $color,
  $active-border: $color,
  $active-color: color-contrast($active-background)
) {
  color: $color;
  border-color: $color;

  &:hover {
    color: $color-hover;
    background-color: $active-background;
    border-color: $active-border;
  }

  .btn-check:focus + &,
  &:focus {
    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  &.dropdown-toggle.show {
    color: $active-color;
    background-color: $active-background;
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $color;
    background-color: transparent;
  }
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  padding: $padding-y $padding-x;
  @include font-size($font-size);
  // Manually declare to provide an override to the browser default
  @include border-radius($border-radius, 0);
}

Loops

Las variantes de botón (para botones regulares y con contorno) usan sus respectivos mixins con nuestro map $theme-colors para generar las clases modificadoras en scss/_buttons.scss.

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value);
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}
Traducción mantenida por Esdocu. Visita esdocu.com para ver más documentaciones traducidas.