Botones

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

En esta página

Clase base

Bootstrap tiene una clase base .btn que define estilos básicos como el espaciado (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 enfoque (focus) y desplazamiento (hover).

html

<button type="button" class="btn">Clase base</button>

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

Si utilizas 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 de las cuales cumple con su propio propósito semántico, con algunos extras añadidos para un 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">Enlace</button>

Consejo de accesibilidad: El uso del color para agregar significado solo proporciona una indicación visual, que no se transmitirá a los usuarios de tecnologías de asistencia como los lectores de pantalla. Asegúrate de que el significado sea obvio a partir del propio contenido (por ejemplo, el texto visible con un suficiente contraste de color) o se incluya a través de medios alternativos, como texto adicional oculto con la clase .visually-hidden.

Desactivar el ajuste de línea del texto

Si no deseas que el texto del botón se ajuste automáticamente (wrap), puedes agregar la clase .text-nowrap al botón. En Sass, puedes configurar $btn-white-space: nowrap para desactivar el ajuste de texto para cada botón.

Etiquetas de botón

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

Al usar clases de botones en elementos <a> que se utilizan para activar la funcionalidad en la página (como colapsar contenido), en lugar de enlazar a nuevas páginas o secciones dentro de la página actual, a estos enlaces se les debe asignar un role="button" para transmitir adecuadamente su propósito a las tecnologías de asistencia, como los lectores de pantalla.

Enlace

html

<a class="btn btn-primary" href="#" role="button">Enlace</a>
<button class="btn btn-primary" type="submit">Botón</button>
<input class="btn btn-primary" type="button" value="Entrada">
<input class="btn btn-primary" type="submit" value="Enviar">
<input class="btn btn-primary" type="reset" value="Restablecer">

Botones con contorno (outline)

¿Necesitas un botón, pero no los pesados colores de fondo que traen consigo? Reemplaza las clases modificadoras predeterminadas con las clases .btn-outline-* para eliminar todas las imágenes y colores de fondo de 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 utilizan un color de primer plano relativamente claro y solo deben usarse sobre un fondo oscuro para tener un contraste suficiente.

Tamaños

¿Prefieres botones más grandes o más pequeños? Agrega .btn-lg o .btn-sm para tamaños adicionales.

html

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

html

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

Incluso puedes diseñar 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;">
  Botón personalizado
</button>

Estado deshabilitado

Haz que los botones parezcan inactivos agregando el atributo booleano disabled a cualquier elemento <button>. Los botones deshabilitados tienen aplicado pointer-events: none, lo que evita que se activen los estados activo y de desplazamiento (hover).

html

<button type="button" class="btn btn-primary" disabled>Botón primario</button>
<button type="button" class="btn btn-secondary" disabled>Botón</button>
<button type="button" class="btn btn-outline-primary" disabled>Botón primario</button>
<button type="button" class="btn btn-outline-secondary" disabled>Botón</button>

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

Los elementos <a> no admiten el atributo disabled, por lo que debes agregar la clase .disabled para que parezca deshabilitado visualmente.
Se incluyen algunos estilos preparados para el futuro para deshabilitar todos los pointer-events en los botones de anclaje.
Los botones deshabilitados que utilicen <a> deben incluir el atributo aria-disabled="true" para indicar el estado del elemento a las tecnologías de asistencia.
Los botones deshabilitados que utilicen <a> no deben incluir el atributo href.

Enlace primario Enlace

html

<a class="btn btn-primary disabled" role="button" aria-disabled="true">Enlace primario</a>
<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Enlace</a>

Advertencia sobre la funcionalidad de los enlaces

Para cubrir los casos en los que debes mantener el atributo href en un enlace deshabilitado, la clase .disabled utiliza pointer-events: none para intentar deshabilitar la funcionalidad del enlace de los elementos <a>. Ten en cuenta que esta propiedad CSS aún no está estandarizada para HTML, pero todos los navegadores modernos la admiten. Además, incluso en los navegadores que sí admiten 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 de asistencia aún podrán activar estos enlaces. Por lo tanto, para mayor seguridad, además de aria-disabled="true", incluye también un atributo tabindex="-1" en estos enlaces para evitar que reciban el enfoque del teclado, y utiliza JavaScript personalizado para deshabilitar su funcionalidad por completo.

Enlace primario Enlace

html

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

Botones de bloque

Crea pilas responsivas de "botones de bloque" de ancho completo como los de Bootstrap 4 con una combinación de nuestras utilidades de visualización (display) y espaciado (gap). Al utilizar utilidades en lugar de clases específicas de botones, tenemos un control mucho mayor sobre el espaciado, la alineación y los comportamientos responsivos.

html

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

Aquí creamos una variación responsiva, comenzando con botones apilados verticalmente hasta el punto de ruptura md, donde .d-md-block reemplaza la clase .d-grid, anulando así la utilidad gap-2. Cambia el tamaño de tu navegador para verlos cambiar.

html

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

Puedes ajustar el ancho de tus botones de bloque con clases de ancho de columna de cuadrícula (grid column width classes). Por ejemplo, para un "botón de bloque" de la mitad de 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">Botón</button>
  <button class="btn btn-primary" type="button">Botón</button>
</div>

Se pueden utilizar utilidades adicionales para ajustar la alineación de los botones cuando están en horizontal. Aquí hemos tomado nuestro ejemplo responsivo anterior y hemos agregado algunas utilidades de flexbox y una utilidad de margen en el botón para alinearlos 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">Botón</button>
  <button class="btn btn-primary" type="button">Botón</button>
</div>

Plugin de botón

El plugin de botón te permite crear botones de alternancia simples de encendido y apagado.

Visualmente, estos botones de alternancia son idénticos a los botones de alternancia de casilla de verificación (checkbox). Sin embargo, las tecnologías de asistencia los transmiten de manera diferente: los lectores de pantalla anunciarán los botones de alternancia de casilla de verificación como "marcado"/"no marcado" (ya que, a pesar de su apariencia, siguen siendo fundamentalmente casillas de verificación), mientras que estos botones de alternancia se anunciarán como "botón"/"botón presionado". La elección entre estos dos enfoques dependerá del tipo de alternancia que estés creando y de si la alternancia tendrá sentido para los usuarios cuando se anuncie como una casilla de verificación o como un botón real.

Estados de alternancia

Agrega data-bs-toggle="button" para alternar el estado activo (active) de un botón. Si estás preactivando un botón, debes agregar manualmente la clase .active y aria-pressed="true" para garantizar que se transmita de manera adecuada a las tecnologías de asistencia.

html

<p class="d-inline-flex gap-1">
  <button type="button" class="btn" data-bs-toggle="button">Botón de alternancia</button>
  <button type="button" class="btn active" data-bs-toggle="button" aria-pressed="true">Botón de alternancia activo</button>
  <button type="button" class="btn" disabled data-bs-toggle="button">Botón de alternancia deshabilitado</button>
</p>
<p class="d-inline-flex gap-1">
  <button type="button" class="btn btn-primary" data-bs-toggle="button">Botón de alternancia</button>
  <button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Botón de alternancia activo</button>
  <button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Botón de alternancia deshabilitado</button>
</p>

Enlace de alternancia Enlace de alternancia activo Enlace de alternancia deshabilitado

html

<p class="d-inline-flex gap-1">
  <a href="#" class="btn" role="button" data-bs-toggle="button">Enlace de alternancia</a >
  <a href="#" class="btn active" role="button" data-bs-toggle="button" aria-pressed="true">Enlace de alternancia activo</a>
  <a class="btn disabled" aria-disabled="true" role="button" data-bs-toggle="button">Enlace de alternancia deshabilitado</a>
</p>
<p class="d-inline-flex gap-1">
  <a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Enlace de alternancia</a>
  <a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Enlace de alternancia activo</a>
  <a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Enlace de alternancia deshabilitado</a>
</p>

Métodos

Puedes crear una instancia de botón con el constructor de botones, 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 con un elemento DOM, puedes usarlo así: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	Método estático que devuelve una instancia de botón asociada con un elemento DOM o crea una nueva en caso de que no haya sido inicializada. Puedes usarlo así: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	Alterna el estado de presión. 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

Agregado en v5.2.0

Como parte del enfoque evolutivo de las variables CSS de Bootstrap, los botones ahora usan variables CSS locales en .btn para una personalización mejorada en tiempo real. Los valores de las variables CSS se establecen a través de Sass, por lo que la personalización de Sass también es 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 correspondientes para minimizar las reglas CSS adicionales con nuestros mixins button-variant(), button-outline-variant(), y button-size().

Aquí tienes un ejemplo de cómo construir una clase modificadora .btn-* personalizada como hacemos con 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 de 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 de Sass

Hay tres mixins para botones: mixins de variantes de botón y variantes de contorno de botón (ambos basados en $theme-colors), además de 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 normales y con contorno) utilizan sus respectivos mixins con nuestro mapa $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);
  }
}