Botones

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

Ejemplos

Bootstrap incluye varios estilos de botones predefinidos, cada uno con su propio propósito semántico, con algunos extras incluidos para un 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>

Deshabilitar ajuste de texto

Si no desea que el texto del botón se ajuste, puede agregar la .text-nowrapclase al botón. En Sass, puede configurar $btn-white-space: nowrappara deshabilitar el ajuste de texto para cada botón.

Etiquetas de botón

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

Cuando se utilizan clases de botón en <a>elementos que se utilizan para activar la funcionalidad en la página (como el contenido colapsado), en lugar de vincular a nuevas páginas o secciones dentro de la página actual, estos vínculos deben tener una role="button"adecuada para transmitir su propósito a las tecnologías de asistencia como lectores de pantalla

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

¿Necesita un botón, pero no los fuertes colores de fondo que traen? Reemplace las clases de modificador predeterminadas con las .btn-outline-*que eliminan todas las imágenes y colores de fondo 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>

Tallas

¿Te apetece botones más grandes o más pequeños? Añadir .btn-lgo .btn-smpara 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>

Cree botones de nivel de bloque, aquellos que abarcan todo el ancho de un padre, agregando .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

estado activo

Los botones aparecerán presionados cuando estén activos con un fondo más oscuro, un borde más oscuro y, cuando las sombras estén habilitadas, una sombra insertada. No es necesario agregar una clase a <button>s ya que usan una pseudoclase . Sin embargo, aún puede forzar la misma apariencia activa con .active(e incluir el aria-pressed=“true”atributo) en caso de que necesite replicar el estado mediante programación.

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

Estado deshabilitado

Haga que los botones parezcan inactivos agregando el disabledatributo booleano a cualquier <button>elemento.

<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 <a>elemento se comportan un poco diferente:

• <a>s no admite el disabledatributo, por lo que debe agregar la .disabledclase para que aparezca visualmente deshabilitada.
• Se incluyen algunos estilos amigables para el futuro para deshabilitar todos pointer-eventslos botones de anclaje. En los navegadores que admitan esa propiedad, no verá el cursor deshabilitado en absoluto.
• El uso de botones deshabilitados <a>debe incluir el aria-disabled="true"atributo para indicar el estado del elemento a las tecnologías de asistencia.
• El uso de botones deshabilitados <a> no debe incluir el hrefatributo.

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

Advertencia de funcionalidad de enlace

Para cubrir los casos en los que debe mantener el hrefatributo en un enlace deshabilitado, la .disabledclase usa pointer-events: nonepara intentar deshabilitar la funcionalidad de enlace de <a>s. Tenga 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 compatibles pointer-events: none, la navegación con el teclado no se ve afectada, lo que significa que los usuarios de teclados videntes y los usuarios de tecnologías de asistencia aún podrán activar estos enlaces. Entonces, para estar seguro, además de aria-disabled="true", también incluya un tabindex="-1"atributo en estos enlaces para evitar que reciban el foco del teclado y use JavaScript personalizado para deshabilitar su funcionalidad por completo.

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

Complemento de botón

Haz más con los botones. Controle los estados de los botones o cree grupos de botones para más componentes, como barras de herramientas.

Alternar estados

Agregar data-toggle="button"para alternar el activeestado de un botón. Si está alternando previamente un botón, debe agregar manualmente la .activeclase y aria-pressed="true" al archivo <button>.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

Casilla de verificación y botones de opción

Los estilos de Bootstrap .buttonse pueden aplicar a otros elementos, como <label>s, para proporcionar alternancia entre casillas de verificación o botones de opción. Agregue data-toggle="buttons"a un .btn-groupque contenga esos botones modificados para habilitar su comportamiento de alternancia a través de JavaScript y agregue .btn-group-togglepara diseñar las <input>s dentro de sus botones. Tenga en cuenta que puede crear botones alimentados por una sola entrada o grupos de ellos.

El estado marcado para estos botones solo se actualiza mediante un clickevento en el botón. Si usa otro método para actualizar la entrada, por ejemplo, con <input type="reset">o aplicando manualmente la propiedad de la entrada, deberá checkedactivar manualmente..active<label>

Tenga en cuenta que los botones marcados previamente requieren que agregue manualmente la .activeclase al archivo <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

Métodos