Botones

Los botones permiten iniciar acciones o navegar a otras páginas. Las etiquetas de los botones expresan qué acción ocurrirá cuando la persona usuaria interactúe con él.

Si quieres conocer las buenas prácticas de uso del componente, puedes visitar el siguiente enlace.

Tipos


    <button type="button" class="btn btn-primary">Primario</button>
    <button type="button" class="btn btn-secondary">Secundario</button>
    <button type="button" class="btn btn-success">Éxito</button>
    <button type="button" class="btn btn-danger">Error</button>
    <button type="button" class="btn btn-link">Link</button>


    <button type="button" class="btn btn-outline-primary">Primario</button>
    <button type="button" class="btn btn-outline-secondary">Secundario</button>
    <button type="button" class="btn btn-outline-success">Éxito</button>
    <button type="button" class="btn btn-outline-danger">Error</button>
    <button type="button" class="btn btn-outline-link">Link</button>

En caso de requerir que un elemento anchor adopte el estilo de un botón, simplemente pueden utilizarse las clases correspondientes de botones.

Enlace Enlace


    <a class="btn btn-primary" href="#" target="_blank" rel="noopener noreferrer">
      Enlace
    </a>
    <a class="btn btn-outline-primary" href="#" target="_blank" 
    rel="noopener noreferrer">
      Enlace
    </a>

Tamaños


    <button type="button" class="btn btn-primary btn-sm">Chico</button>
    <button type="button" class="btn btn-primary">Mediano</button>
    <button type="button" class="btn btn-primary btn-lg">Grande</button>

Estado Deshabilitado


    <button type="button" class="btn btn-primary btn-sm" disabled>Chico</button>
    <button type="button" class="btn btn-primary" disabled>Mediano</button>
    <button type="button" class="btn btn-primary btn-lg" disabled>Grande</button>

Expandible


    <button type="button" class="btn btn-primary btn-block">
      Botón expandible
    </button>

Con icono


    <button type="button" class="btn btn-primary">
      <i class="bx bxs-info-circle o-icon"></i> 
      Botón
    </button>

    <button type="button" class="btn btn-primary" aria-label="Botón">
      <span class="material-symbols-rounded o-icon" aria-hidden="true">info</span>
    </button>

Con spinner


    <button type="button" class="btn btn-primary">
      <div class="spinner-border text-light spinner-border-sm" role="status">
        <span class="sr-only">Cargando...</span>
      </div>
      Botón
    </button>
    <button type="button" class="btn btn-secondary">
      <div class="spinner-border text-light spinner-border-sm" role="status">
        <span class="sr-only">Cargando...</span>
      </div>
      Botón
    </button>
    <button type="button" class="btn btn-success">
      <div class="spinner-border text-light spinner-border-sm" role="status">
        <span class="sr-only">Cargando...</span>
      </div>
      Botón
    </button>
    <button type="button" class="btn btn-danger">
      <div class="spinner-border text-light spinner-border-sm" role="status">
        <span class="sr-only">Cargando...</span>
      </div>
      Botón
    </button>
    <button type="button" class="btn btn-link">
      <div class="spinner-border text-info spinner-border-sm" role="status">
        <span class="sr-only">Cargando...</span>
      </div>
      Botón
    </button>


    <button type="button" class="btn btn-outline-primary">
      <div class="spinner-border text-primary spinner-border-sm" role="status">
        <span class="sr-only">Cargando...</span>
      </div>
      Botón
    </button>
    <button type="button" class="btn btn-outline-secondary">
      <div class="spinner-border text-secondary spinner-border-sm" role="status">
        <span class="sr-only">Cargando...</span>
      </div>
      Botón
    </button>
    <button type="button" class="btn btn-outline-success">
      <div class="spinner-border text-success spinner-border-sm" role="status">
        <span class="sr-only">Cargando...</span>
      </div>
      Botón
    </button>
    <button type="button" class="btn btn-outline-danger">
      <div class="spinner-border text-danger spinner-border-sm" role="status">
        <span class="sr-only">Cargando...</span>
      </div>
      Botón
    </button>
    <button type="button" class="btn btn-outline-link">
      <div class="spinner-border text-info spinner-border-sm" role="status">
        <span class="sr-only">Cargando...</span>
      </div>
      Botón
    </button>

Botón XS - Icono


    <button type="button" class="btn btn-xs" aria-label="Editar">
      <span
        class="material-symbols-rounded o-icon"
        aria-hidden="true"
      >
        edit
      </span>
    </button>
    <button type="button" class="btn btn-xs" aria-label="Editar">
      <i class="bx bxs-trash-alt o-icon"></i>
    </button>
    <a href="#" class="btn btn-xs" aria-label="Editar" tabindex="0">
      <span
        class="material-symbols-rounded o-icon"
        aria-hidden="true"
      >
        visibility
      </span>
    </a>
    <a href="#" class="btn btn-xs" aria-label="Editar" tabindex="0">
      <i class="bx bxs-download o-icon"></i>
    </a>