carbon-components/html/button/button--secondary--field.html

The Carbon Design System is IBM’s open-source design system for products and experiences.

<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<button
  class="bx--btn bx--btn--secondary bx--btn--field"
   type="button">
  Button
</button>
<button
  class="bx--btn bx--btn--secondary bx--btn--field"
   type="button" disabled>
  Button
</button>
<button
  class="bx--btn bx--btn--secondary bx--btn--field"
   type="button">
  With icon
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--btn__icon" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M17 15L17 8 15 8 15 15 8 15 8 17 15 17 15 24 17 24 17 17 24 17 24 15z"></path></svg>
</button>
<button
  class="bx--btn bx--btn--secondary bx--btn--field"
   type="button" disabled>
  With icon
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--btn__icon" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M17 15L17 8 15 8 15 15 8 15 8 17 15 17 15 24 17 24 17 17 24 17 24 15z"></path></svg>
</button>
<button
  class="bx--btn bx--btn--secondary bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--bottom bx--tooltip--align-center  bx--btn--field">
  <span class="bx--assistive-text">Add</span>
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--btn__icon" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M17 15L17 8 15 8 15 15 8 15 8 17 15 17 15 24 17 24 17 17 24 17 24 15z"></path></svg>
</button>
<!-- The markup below is for demonstration purposes only -->
<div class="example-input-button-pairing">
  <div class="bx--form-item">
    <label for="text-input-3" class="bx--label">Text Input label</label>
    <input id="text-input-3" type="text"
      class="bx--text-input"
      placeholder="Optional placeholder text">
  </div>
  <div class="example-button-wrapper">
    <button class=" bx--btn bx--btn--secondary bx--btn--field"  type="button">
      Button
    </button>
  </div>
</div>