Toolbar

Basic

<!-- Toolbar -->
<div class="ui-row">

  <div class="ui-col ui-col--medium--1-2">
    <form class="ui-form">
      <div class="ui-form__group">
        <label>
          <div class="ui-form__input-wrapper">
            <!-- input type search with magnifier icon -->
            <input class="ui-input ui-input--search" type="search" placeholder="...">
            <button class="ui-input__icon" type="submit" tabindex="-1"></button>
          </div>
        </label>
      </div>
    </form>
  </div>

  <1-- Support button is hidden on mobile -->
  <div class="ui-col ui-col--medium--1-2 ui-col--align-right ui-hidden--small--down">
    <div class="ui-btn ui-btn--pill ui-btn--highlight">...</div>
  </div>

</div>

With alerts tray

<!-- Toolbar with alert -->
<div class="ui-row">

  <div class="ui-col ui-col--medium--1-2">
    <form class="ui-form">
      <div class="ui-form__group">
        <label>
          <div class="ui-form__input-wrapper">
            <!-- input type search with magnifier icon -->
            <input class="ui-input ui-input--search" type="search" placeholder="...">
            <button class="ui-input__icon" type="submit" tabindex="-1"></button>
          </div>
        </label>
      </div>
    </form>
  </div>

  <div class="ui-col ui-col--medium--1-2 ui-hidden--small--down ui-col--parent">
    <div class="ui-row">

      <div class="ui-col ui-col--xsmall ui-col--align-right">
        <button class="ui-btn ui-btn--secondary ui-btn--circle">

          <!-- 2 icons variant (dark/light) required for hover -->
          <i class="ui-icon ui-icon--alert"></i>
          <i class="ui-icon ui-icon--alert.ui-icon--light"></i>

          <!-- badge color is controlled using "ui-color__bg--" class -->
          <span class="ui-badge ui-color__bg--primary"></span>
        </button>
      </div>

      <div class="ui-col ui-col--xsmall ui-col--shrink ui-col--align-right">
        <div class="ui-btn ui-btn--pill ui-btn--highlight">...</div>
      </div>

    </div>
  </div>
</div>