Toolbars

Toolbars contain a group of buttons/inputs and are usually used to group actions related to the content. The placement of items depends on whether the toolbar is left-aligned or right-aligned.

Left-aligned toolbar

On left-aligned toolbars, the primary action is always on the left.

<div class="c-field-group">
  <button
    type="primary"
    class="c-button c-button--primary"
  >
    <span class="c-button__label">Save</span>
  </button>
  <button class="c-button">
    <span class="c-button__label">Cancel</span>
  </button>
</div>

If there is more than 1 secondary action, secondary actions are grouped into a separate field group to increase margin between primary and secondary actions.

<div class="c-field-group">
  <button
    type="primary"
    class="c-button c-button--primary"
  >
    <span class="c-button__label">Accept</span>
  </button>
  <div class="c-field-group">
    <button class="c-button">
      <span class="c-button__label">Decline</span>
    </button>
    <button class="c-button">
      <span class="c-button__label">Read more</span>
    </button>
  </div>
</div>

Right-aligned toolbar

On right-aligned toolbars (like in card headers), the primary action is always on the right. There a few options for secondary actions and main filter action, I illustrate some of them below for discussion purposes.

I think I prefer the idea of solely using the dropdown as a filter and decoupling of the Add action. We might still implicitly prefill the value in the next screen, but I don't know if this has to as explicit as it is now. If there's only one filter dropdown, we might opt to show it on the left side.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="c-card c-card--large">
  <div class="c-card__header">
    <h2 class="c-card__title">Dropdown linked to action</h2>
    <div class="c-card__actions">
      <div class="c-field-group">
        <div class="c-field-group">
          <button class="c-button c-button--icon-only">
            <span
              class="c-button__icon c-icon c-icon--small"
            >
              <!-- SVG element -->
            </span>
          </button>
          <div class="c-field-group c-field-group--merged">
            <div class="c-select c-select--icon-right">
              <select class="c-select__input">
                <option value="1">Type A</option>
                <option value="2">Type B</option>
              </select>
              <div
                class="c-select__icon c-select__icon--right c-icon"
              >
                <!-- SVG element -->
              </div>
            </div>
            <button
              type="primary"
              class="c-button c-button--primary"
            >
              <span
                class="c-button__icon c-icon c-icon--small"
              >
                <!-- SVG element -->
              </span>
              <span class="c-button__label">Add</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="c-card__content">
    <p class="u-paragraph u-muted">
      Lorem ipsum dolor sit amet, consectetur adipiscing
      elit.
    </p>
  </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="c-card c-card--large">
  <div class="c-card__header">
    <h2 class="c-card__title">Dropdown as a filter only</h2>
    <div class="c-card__actions">
      <div class="c-field-group">
        <div class="c-select c-select--icon-right">
          <select class="c-select__input">
            <option value="1">Type A</option>
            <option value="2">Type B</option>
          </select>
          <div
            class="c-select__icon c-select__icon--right c-icon"
          >
            <!-- SVG element -->
          </div>
        </div>
        <button class="c-button c-button--icon-only">
          <span class="c-button__icon c-icon c-icon--small">
            <!-- SVG element -->
          </span>
        </button>
        <div class="c-field-group">
          <button
            type="primary"
            class="c-button c-button--primary"
          >
            <span
              class="c-button__icon c-icon c-icon--small"
            >
              <!-- SVG element -->
            </span>
            <span class="c-button__label">Add</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="c-card__content">
    <p class="u-paragraph u-muted">
      Lorem ipsum dolor sit amet, consectetur adipiscing
      elit.
    </p>
  </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="c-card c-card--large">
  <div class="c-card__header">
    <h2 class="c-card__title">
      Dropdown as a filter only (left-aligned)
    </h2>
    <div class="c-card__secondary-actions">
      <div class="c-select c-select--icon-right">
        <select
          class="c-select__input"
          slot="secondary-actions"
        >
          <option value="1">Type A</option>
          <option value="2">Type B</option>
        </select>
        <div
          class="c-select__icon c-select__icon--right c-icon"
        >
          <!-- SVG element -->
        </div>
      </div>
    </div>
    <div class="c-card__actions">
      <div class="c-field-group">
        <div class="c-field-group">
          <button class="c-button c-button--icon-only">
            <span
              class="c-button__icon c-icon c-icon--small"
            >
              <!-- SVG element -->
            </span>
          </button>
        </div>
        <button
          type="primary"
          class="c-button c-button--primary"
        >
          <span class="c-button__icon c-icon c-icon--small">
            <!-- SVG element -->
          </span>
          <span class="c-button__label">Add</span>
        </button>
      </div>
    </div>
  </div>
  <div class="c-card__content">
    <p class="u-paragraph u-muted">
      Lorem ipsum dolor sit amet, consectetur adipiscing
      elit.
    </p>
  </div>
</div>