Buttons
Documentation
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="/ar/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-hirwghd04ngxwl4tavlnxskmrx-uhlxv6ymdltwwwju" type="hidden" name="form_build_id" value="form-HirwGHd04ngXWl4TAvLNxSkmrX_uhLXv6ymdltwWwJU" />
<input data-drupal-selector="edit-themeguide-test-form" type="hidden" name="form_id" value="themeguide_test_form" />
</form>