Buttons

Rules

1. All or only primary: If any button in a given group of buttons (e.g., in the toolbar) has an icon, all buttons in that group must have an icon.
2. The primary button always contains an icon.
3. In the same button group, the primary button cannot be combined with anything other than the default or secondary button.
4. There is always only one primary button on a given visible area.
5. The primary button is always the first in the row of buttons (aligned closer to the edge).

html Valid

<p class="text-end">
  <button class="btn btn-secondary">
    <svg
      width="16"
      height="16"
      data-av-icon="home"
      aria-hidden="true"
    ></svg>
  </button>
  <button class="btn btn-secondary">
    <svg
      width="16"
      height="16"
      data-av-icon="settings"
      aria-hidden="true"
    ></svg>
  </button>
  <button class="btn btn-secondary">
    <svg
      width="16"
      height="16"
      data-av-icon="search"
      aria-hidden="true"
    ></svg>
  </button>
  <button class="btn btn-primary">
    <svg
      width="16"
      height="16"
      data-av-icon="plus"
      aria-hidden="true"
    ></svg>
    Primary action
  </button>
</p>
<hr />
<p>
  <button class="btn btn-primary">
    <svg
      width="16"
      height="16"
      data-av-icon="plus"
      aria-hidden="true"
    ></svg>
    Primary action
  </button>
  <button class="btn btn-link">More informations</button>
</p>
<hr />
<p>
  <button class="btn btn-primary">
    <svg
      width="16"
      height="16"
      data-av-icon="plus"
      aria-hidden="true"
    ></svg>
    Primary action
  </button>
  <button class="btn btn-default">More</button>
  <button class="btn btn-default">Detail</button>
</p>
<hr />
<p>
  <button class="btn btn-primary">
    <svg
      width="16"
      height="16"
      data-av-icon="plus"
      aria-hidden="true"
    ></svg>
    Primary action
  </button>
  <button class="btn btn-default">
    <svg
      width="16"
      height="16"
      data-av-icon="search"
      aria-hidden="true"
    ></svg>
    More
  </button>
  <button class="btn btn-default">
    <svg
      width="16"
      height="16"
      data-av-icon="eye"
      aria-hidden="true"
    ></svg>
    Detail
  </button>
</p>
<hr />
<p>
  <button class="btn btn-success">
    <svg
      width="16"
      height="16"
      data-av-icon="plus"
      aria-hidden="true"
    ></svg>
    Success
  </button>
  <button class="btn btn-default">
    <svg
      width="16"
      height="16"
      data-av-icon="eye"
      aria-hidden="true"
    ></svg>
    Default
  </button>
  <button class="btn btn-default">
    <svg
      width="16"
      height="16"
      data-av-icon="eye"
      aria-hidden="true"
    ></svg>
    Default
  </button>
</p>
<hr />
<p>
  <button class="btn btn-warning">Warning</button>
  <button class="btn btn-default">Default</button>
  <button class="btn btn-default">Default</button>
</p>
<hr />
<p>
  <button class="btn btn-primary">Primary action</button>
  <button class="btn btn-link">More informations</button>
</p>

html Invalid

<p class="text-end">
  <button class="btn btn-secondary">
    <svg
      width="16"
      height="16"
      data-av-icon="home"
      aria-hidden="true"
    ></svg>
  </button>
  <button class="btn btn-secondary">Secondary</button>
  <button class="btn btn-secondary">
    <svg
      width="16"
      height="16"
      data-av-icon="search"
      aria-hidden="true"
    ></svg>
  </button>
  <button class="btn btn-primary">
    <svg
      width="16"
      height="16"
      data-av-icon="plus"
      aria-hidden="true"
    ></svg>
    Primary action
  </button>
</p>
<p>
  <button class="btn btn-primary">Primary action</button>
  <button class="btn btn-default">
    <svg
      width="16"
      height="16"
      data-av-icon="search"
      aria-hidden="true"
    ></svg>
    More
  </button>
  <button class="btn btn-default">Detail</button>
</p>
<p>
  <button class="btn btn-primary">
    <svg
      width="16"
      height="16"
      data-av-icon="plus"
      aria-hidden="true"
    ></svg>
    Primary action
  </button>
  <button class="btn btn-default">
    <svg
      width="16"
      height="16"
      data-av-icon="search"
      aria-hidden="true"
    ></svg>
    More
  </button>
  <button class="btn btn-default">Detail</button>
</p>
<p>
  <button class="btn btn-success">
    <svg
      width="16"
      height="16"
      data-av-icon="plus"
      aria-hidden="true"
    ></svg>
    Success
  </button>
  <button class="btn btn-primary">
    <svg
      width="16"
      height="16"
      data-av-icon="eye"
      aria-hidden="true"
    ></svg>
    Primary
  </button>
  <button class="btn btn-default">
    <svg
      width="16"
      height="16"
      data-av-icon="eye"
      aria-hidden="true"
    ></svg>
    Default
  </button>
</p>
<p>
  <button class="btn btn-warning">
    <svg
      width="16"
      height="16"
      data-av-icon="eye"
      aria-hidden="true"
    ></svg>
    Warning
  </button>
  <button class="btn btn-primary">
    <svg
      width="16"
      height="16"
      data-av-icon="eye"
      aria-hidden="true"
    ></svg>
    Primary
  </button>
  <button class="btn btn-default">
    <svg
      width="16"
      height="16"
      data-av-icon="eye"
      aria-hidden="true"
    ></svg>
    Default
  </button>
</p>

Incorrect implementation

This example shows the wrong way. Click to view.

Show