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 contorno

¿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 (con un fondo más oscuro, un borde más oscuro y una sombra insertada) cuando estén activos. 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.
• Los botones deshabilitados deben incluir el aria-disabled="true"atributo para indicar el estado del elemento a las tecnologías de asistencia.

<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