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

Clase base

Bootstrap tiene una clase base .btn que establece estilos básicos como el padding y la alineación del contenido. Por defecto, los controles .btn tienen un borde y color de fondo transparentes, y carecen de estilos explícitos de foco y hover.

html

<button type="button" class="btn">Base class</button>

La clase .btn está pensada para usarse junto con nuestras variantes de botones, o para servir como base para tus propios estilos personalizados.

Si usas la clase .btn por sí sola, recuerda definir al menos algunos estilos explícitos de :focus y/o :focus-visible.

Variantes

Bootstrap incluye varias variantes de botones, cada una con su propio propósito semántico, con algunos extras añadidos para mayor control.

html

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

Consejo de accesibilidad: Usar color para añadir significado solo proporciona una indicación visual, que no se transmitirá a los usuarios de tecnologías de asistencia como lectores de pantalla. Asegúrate de que el significado sea obvio por el contenido mismo (p. ej., el texto visible con un suficiente contraste de color) o se incluya mediante medios alternativos, como texto adicional oculto con la clase .visually-hidden.

Desactivar 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

html

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

html

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

html

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

html

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

Incluso puedes crear tu propio tamaño personalizado con variables CSS:

html

<button type="button" class="btn btn-primary"
        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
  Custom 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.

html

<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
<button type="button" class="btn btn-outline-secondary" 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 que usan <a> deben incluir el atributo aria-disabled="true" para indicar el estado del elemento a las tecnologías de asistencia.
Los botones deshabilitados que usan <a> no deben incluir el atributo href.

Enlace primary Enlace

html

<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>

Advertencia sobre la funcionalidad de enlaces

Para cubrir los casos en los que tienes que mantener el atributo href en un enlace deshabilitado, la clase .disabled usa pointer-events: none para intentar deshabilitar la funcionalidad de enlace de los <a>. Ten en cuenta que esta propiedad de CSS aún no está estandarizada para HTML, pero todos los navegadores modernos la soportan. Además, incluso en los navegadores que sí soportan pointer-events: none, la navegación por teclado no se ve afectada, lo que significa que los usuarios videntes de teclado y los usuarios de tecnologías de asistencia aún podrán activar estos enlaces. Para estar seguros, además de aria-disabled="true", incluye también un atributo tabindex="-1" en estos enlaces para evitar que reciban el foco del teclado, y usa JavaScript personalizado para deshabilitar su funcionalidad por completo.

Enlace primary Enlace

html

<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

Botones en bloque

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

html

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

html

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

html

<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 en horizontal. Aquí hemos tomado nuestro ejemplo responsive anterior y añadido algunas utilidades flex y una utilidad de margin en el botón para alinear los botones a la derecha cuando ya no están apilados.

html

<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 botón

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 de conmutación

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.

html

<p class="d-inline-flex gap-1">
  <button type="button" class="btn" data-bs-toggle="button">Toggle button</button>
  <button type="button" class="btn active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
  <button type="button" class="btn" disabled data-bs-toggle="button">Disabled toggle button</button>
</p>
<p class="d-inline-flex gap-1">
  <button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
  <button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
  <button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
</p>

Toggle link Toggle link activo Toggle link deshabilitado

html

<p class="d-inline-flex gap-1">
  <a href="#" class="btn" role="button" data-bs-toggle="button">Toggle link</a>
  <a href="#" class="btn active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
  <a class="btn disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
</p>
<p class="d-inline-flex gap-1">
  <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 class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
</p>

Métodos

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

const bsButton = new bootstrap.Button('#myButton')

Método	Descripción
`dispose`	Destruye el botón de un elemento. (Elimina los datos almacenados en el elemento DOM)
`getInstance`	Método estático que te 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)`.
`toggle`	Alterna el estado push. Le da al botón la apariencia de haber sido activado.

Por ejemplo, para alternar todos los botones

document.querySelectorAll('.btn').forEach(buttonElement => {
  const button = bootstrap.Button.getOrCreateInstance(buttonElement)
  button.toggle()
})

CSS

Variables

Añadido en v5.2.0

Como parte del enfoque evolutivo de variables CSS de Bootstrap, los botones ahora usan variables CSS locales en .btn para una personalización en tiempo real mejorada. Los valores de las variables CSS se establecen vía Sass, por lo que la personalización con Sass también sigue siendo compatible.

scss/_buttons.scss

--#{$prefix}btn-padding-x: #{$btn-padding-x};
--#{$prefix}btn-padding-y: #{$btn-padding-y};
--#{$prefix}btn-font-family: #{$btn-font-family};
@include rfs($btn-font-size, --#{$prefix}btn-font-size);
--#{$prefix}btn-font-weight: #{$btn-font-weight};
--#{$prefix}btn-line-height: #{$btn-line-height};
--#{$prefix}btn-color: #{$btn-color};
--#{$prefix}btn-bg: transparent;
--#{$prefix}btn-border-width: #{$btn-border-width};
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-border-radius: #{$btn-border-radius};
--#{$prefix}btn-hover-border-color: transparent;
--#{$prefix}btn-box-shadow: #{$btn-box-shadow};
--#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
--#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);

Cada clase modificadora .btn-* actualiza las variables CSS apropiadas para minimizar las reglas CSS adicionales con nuestros mixins button-variant(), button-outline-variant() y button-size().

Aquí hay un ejemplo de cómo construir una clase modificadora personalizada .btn-* como hacemos para los botones exclusivos de nuestra documentación, reasignando las variables CSS de Bootstrap con una mezcla de nuestras propias variables CSS y Sass.

site/src/scss/_buttons.scss

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}

Variables Sass

scss/_variables.scss

$btn-color:                   var(--#{$prefix}body-color);
$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:              var(--#{$prefix}link-color);
$btn-link-hover-color:        var(--#{$prefix}link-hover-color);
$btn-link-disabled-color:     $gray-600;
$btn-link-focus-shadow-rgb:   to-rgb(mix(color-contrast($link-color), $link-color, 15%));

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           var(--#{$prefix}border-radius);
$btn-border-radius-sm:        var(--#{$prefix}border-radius-sm);
$btn-border-radius-lg:        var(--#{$prefix}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 Sass

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.

scss/mixins/_buttons.scss

@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)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-bg: #{$background};
  --#{$prefix}btn-border-color: #{$border};
  --#{$prefix}btn-hover-color: #{$hover-color};
  --#{$prefix}btn-hover-bg: #{$hover-background};
  --#{$prefix}btn-hover-border-color: #{$hover-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$disabled-color};
  --#{$prefix}btn-disabled-bg: #{$disabled-background};
  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
}

scss/mixins/_buttons.scss

@mixin button-outline-variant(
  $color,
  $color-hover: color-contrast($color),
  $active-background: $color,
  $active-border: $color,
  $active-color: color-contrast($active-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-border-color: #{$color};
  --#{$prefix}btn-hover-color: #{$color-hover};
  --#{$prefix}btn-hover-bg: #{$active-background};
  --#{$prefix}btn-hover-border-color: #{$active-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$color};
  --#{$prefix}btn-disabled-bg: transparent;
  --#{$prefix}btn-disabled-border-color: #{$color};
  --#{$prefix}gradient: none;
}

scss/mixins/_buttons.scss

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}btn-padding-y: #{$padding-y};
  --#{$prefix}btn-padding-x: #{$padding-x};
  @include rfs($font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-border-radius: #{$border-radius};
}

Bucles Sass

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.

scss/_buttons.scss

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @if $color == "light" {
      @include button-variant(
        $value,
        $value,
        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
        $active-background: shade-color($value, $btn-active-bg-shade-amount),
        $active-border: shade-color($value, $btn-active-border-shade-amount)
      );
    } @else if $color == "dark" {
      @include button-variant(
        $value,
        $value,
        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
        $active-background: tint-color($value, $btn-active-bg-tint-amount),
        $active-border: tint-color($value, $btn-active-border-tint-amount)
      );
    } @else {
      @include button-variant($value, $value);
    }
  }
}

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