Buttons

Primary buttons

<div>
  <button class="btn btn-primary btn-size-large" type="button">Button Text</button>
  <button class="btn btn-primary" type="button">Button Text</button>
  <button class="btn btn-primary btn-size-small" type="button">Button Text</button>
</div>

<div>
  <button class="btn btn-primary btn-size-large" type="button" disabled>Button Text</button>
  <button class="btn btn-primary" type="button" disabled>Button Text</button>
  <button class="btn btn-primary btn-size-small" type="button" disabled>Button Text</button>
</div>

 

Secondary buttons

<div>
  <button class="btn btn-secondary btn-size-large" type="button">Button Text</button>
  <button class="btn btn-secondary" type="button">Button Text</button>
  <button class="btn btn-secondary btn-size-small" type="button">Button Text</button>
</div>

<div>
  <button class="btn btn-secondary btn-size-large" type="button" disabled>Button Text</button>
  <button class="btn btn-secondary" type="button" disabled>Button Text</button>
  <button class="btn btn-secondary btn-size-small" type="button" disabled>Button Text</button>
</div>

 

Buttons with icons

<div>
  <button class="btn btn-primary btn-icon btn-icon-before" type="button"><i class="bi bi-plus"></i>Button Text</button>
  <button class="btn btn-primary btn-icon btn-icon-after" type="button">Button Text<i class="bi bi-plus"></i></button>
</div>

<div>
  <button class="btn btn-primary btn-icon btn-icon-before" type="button" disabled><i class="bi bi-plus"></i>Button Text</button>
  <button class="btn btn-primary btn-icon btn-icon-after" type="button" disabled>Button Text<i class="bi bi-plus"></i></button>
</div>

 

Icon-only buttons

<div>
  <button class="btn btn-primary btn-icon btn-icon-only" type="button" aria-label="Add Element"><i class="bi bi-plus"></i></button>
</div>

<div>
  <button class="btn btn-primary btn-icon btn-icon-only" type="button" aria-label="Add Element" disabled><i class="bi bi-plus"></i></button>
</div>

 

Form element: Submit button

<form class="themeguide-test-form" data-drupal-selector="themeguide-test-form" action="/themeguide/components/buttons" method="post" id="themeguide-test-form" accept-charset="UTF-8">
  <input data-drupal-selector="edit-submit" type="submit" id="edit-submit" name="op" value="Submit" class="button js-form-submit form-submit btn btn-primary" />
<input data-drupal-selector="edit-button" type="submit" id="edit-button" name="op" value="Button" class="button js-form-submit form-submit btn btn-primary" />
<input data-drupal-selector="edit-button-disabled" disabled="disabled" type="submit" id="edit-button-disabled" name="op" value="Button - disabled" class="button js-form-submit form-submit is-disabled btn btn-primary" />
<input autocomplete="off" data-drupal-selector="form-3nkgk3dgwhg785mcd8swh3itlhyk4kpqkz9wkbm0gak" type="hidden" name="form_build_id" value="form-3nKGK3dgwhG785mCd8sWH3itLHYK4kPqkz9WKBM0gak" />
<input data-drupal-selector="edit-themeguide-test-form" type="hidden" name="form_id" value="themeguide_test_form" />

</form>