Botones

<button class="btn btn-marca">Marca</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-link">Link</button>

<button class="btn btn-outline-marca">Marca</button>
<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-danger">Danger</button>
<button class="btn btn-outline-dark">Dark</button>

<button class="btn btn-marca btn-sm">Pequeño</button>
<button class="btn btn-marca">Estándar</button>
<button class="btn btn-marca btn-lg">Grande</button>

<button class="btn btn-marca">Normal</button>

<!-- Desactivado -->
<button class="btn btn-marca" disabled>Desactivado</button>

<!-- Cargando -->
<button class="btn btn-primary" aria-busy="true">
  <span class="spinner spinner-sm" aria-hidden="true"></span>
  Cargando...
</button>

<div class="btn-group" role="group" aria-label="Grupo de acciones">
  <button class="btn btn-outline-marca">Izquierda</button>
  <button class="btn btn-outline-marca">Centro</button>
  <button class="btn btn-outline-marca">Derecha</button>
</div>

<span class="badge badge-marca">Marca</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>

<!-- Badge cuadrado -->
<span class="badge badge-square badge-marca">Nuevo</span>

<!-- Badge dentro de botón -->
<button class="btn btn-primary">
  Notificaciones
  <span class="badge badge-marca">12</span>
</button>