docs/components/bars-actions.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Bars example</title>

    <!-- Photon.css -->
    <link rel="stylesheet" href="/dist/css/photon.css">

    <!-- Photon-theme-osx.css -->
    <link rel="stylesheet" href="/dist/css/photon-theme-osx.css">
  </head>
  <body>
    <div class="window">
      <header class="toolbar toolbar-header">
        <h1 class="title">Header with actions</h1>

        <div class="toolbar-actions">
          <div class="btn-group">
            <button class="btn btn-default" type="button">
              <span class="icon icon-home"></span>
            </button>
            <button class="btn btn-default" type="button">
              <span class="icon icon-folder"></span>
            </button>
            <button class="btn btn-default active" type="button">
              <span class="icon icon-cloud"></span>
            </button>
            <button class="btn btn-default" type="button">
              <span class="icon icon-popup"></span>
            </button>
            <button class="btn btn-default" type="button">
              <span class="icon icon-shuffle"></span>
            </button>
          </div>

          <button class="btn btn-default" type="button">
            <span class="icon icon-home icon-text"></span>
            Filters
          </button>

          <button class="btn btn-default btn-dropdown pull-right" type="button">
            <span class="icon icon-megaphone"></span>
          </button>
        </div>
      </header>

      <div class="window-content"></div>

      <footer class="toolbar toolbar-footer">
        <div class="toolbar-actions">
          <button class="btn btn-default" type="button">
            Cancel
          </button>

          <button class="btn btn-primary pull-right" type="button">
            Save
          </button>
        </div>
      </footer>
    </div>
  </body>
</html>