PF Next

Toolbar Demo

Toolbar Simple Example

Preview

<div class="pf-l-toolbar pf-u-justify-content-space-between pf-u-mx-xl pf-u-my-md">
  <div class="pf-l-toolbar__group">
    <div class="pf-l-toolbar__item pf-u-mr-2xl">
      <div class="pf-c-input-group">
        <div class="pf-c-dropdown">
          <button id="dropdown-example-collapsed-button" class="pf-c-dropdown__toggle" aria-expanded="false">
            All
            <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
          </button>
          <div class="pf-c-dropdown__menu" hidden>
            All
          </div>
        </div>
        <input class="pf-c-form-control" input="true" type="text" id="textInput10" name="textInput10" placeholder="Filter..." aria-label="filter input with popup button"></input>
        <button class="pf-c-button pf-m-tertiary" id="textAreaButton2">
          <i class="fas fa-search" aria-hidden="true"></i>
        </button>
      </div>
    </div>
    <div class="pf-l-toolbar__item pf-u-mr-lg">
      <div class="pf-c-dropdown">
        <button id="dropdown-example-collapsed-button" class="pf-c-dropdown__toggle" aria-expanded="false">
          All
          <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
        </button>
        <div class="pf-c-dropdown__menu" hidden>
          All
        </div>
      </div>
    </div>
    <div class="pf-l-toolbar__item">
      <button class="pf-c-button pf-m-plain" aria-label="Sort A-Z">
        <i class="fas fa-sort-alpha-down" aria-hidden="true"></i>
      </button>
    </div>
  </div>
  <div class="pf-l-toolbar__group">
    <div class="pf-l-toolbar__item pf-u-mr-md">
      <button class="pf-c-button pf-m-plain" aria-label="Table">
        <i class="fas fa-table" aria-hidden="true"></i>
      </button>
    </div>
    <div class="pf-l-toolbar__item">
      <button class="pf-c-button pf-m-plain" aria-label="List">
        <i class="fas fa-list" aria-hidden="true"></i>
      </button>
    </div>
    <div class="pf-l-toolbar__item pf-u-mx-md">
      <button class="pf-c-button pf-m-plain">
        Action
      </button>
    </div>
    <div class="pf-l-toolbar__item pf-u-mr-md">
      <button class="pf-c-button pf-m-primary">
        Action
      </button>
    </div>
    <div class="pf-l-toolbar__item">
      <div class="pf-c-dropdown pf-m-plain">
        <button id="-button" class="pf-c-dropdown__toggle" aria-expanded="false">
          <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
        </button>
        <div class="pf-c-dropdown__menu" hidden>
        </div>
      </div>
    </div>
  </div>
</div>

Toolbar Complex Example

Preview

17 of 80 items
<div class="pf-l-toolbar">
  <section class="pf-l-toolbar__section pf-u-justify-content-space-between pf-u-mx-xl pf-u-my-md">
    <div class="pf-l-toolbar__group">
      <div class="pf-l-toolbar__item pf-u-mr-2xl">
        <div class="pf-c-input-group">
          <div class="pf-c-dropdown">
            <button id="dropdown-example-collapsed-button" class="pf-c-dropdown__toggle" aria-expanded="false">
              All
              <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
            </button>
            <div class="pf-c-dropdown__menu" hidden>
              All
            </div>
          </div>
          <input class="pf-c-form-control" input="true" type="text" id="textInput10" name="textInput10" placeholder="Filter..." aria-label="filter input with popup button"></input>
          <button class="pf-c-button pf-m-tertiary" id="textAreaButton2">
            <i class="fas fa-search" aria-hidden="true"></i>
          </button>
        </div>
      </div>
      <div class="pf-l-toolbar__item pf-u-mr-lg">
        <div class="pf-c-dropdown">
          <button id="dropdown-example-collapsed-button" class="pf-c-dropdown__toggle" aria-expanded="false">
            All
            <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
          </button>
          <div class="pf-c-dropdown__menu" hidden>
            All
          </div>
        </div>
      </div>
      <div class="pf-l-toolbar__item">
        <button class="pf-c-button pf-c-button pf-m-plain" aria-label="Sort A-Z">
          <i class="fas fa-sort-alpha-down" aria-hidden="true"></i>
        </button>
      </div>
    </div>
    <div class="pf-l-toolbar__group">
      <div class="pf-l-toolbar__item pf-u-mr-md">
        <button class="pf-c-button pf-m-plain" aria-label="Table">
          <i class="fas fa-table" aria-hidden="true"></i>
        </button>
      </div>
      <div class="pf-l-toolbar__item">
        <button class="pf-c-button pf-m-plain" aria-label="List">
          <i class="fas fa-list" aria-hidden="true"></i>
        </button>
      </div>
      <div class="pf-l-toolbar__item pf-u-mx-md">
        <button class="pf-c-button pf-m-plain">
          Action
        </button>
      </div>
      <div class="pf-l-toolbar__item pf-u-mr-md">
        <button class="pf-c-button pf-m-primary">
          Action
        </button>
      </div>
      <div class="pf-l-toolbar__item">
        <div class="pf-c-dropdown pf-m-plain">
          <button id="-button" class="pf-c-dropdown__toggle" aria-expanded="false">
            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
          </button>
          <div class="pf-c-dropdown__menu" hidden>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="pf-l-toolbar__section pf-u-justify-content-space-between pf-u-mx-xl pf-u-my-md">
    <div class="pf-l-toolbar__group">
      <div class="pf-l-toolbar__item">
        17 of 80 items
      </div>
    </div>
  </section>
</div>

Documentation

design md file