Action Bar

        <coral-actionbar>
          <coral-actionbar-item>
            <a is="coral-anchorbutton" href="#" variant="quiet" icon="search" title="Delete">Search</a>
          </coral-actionbar-item>
          <coral-actionbar-item>
            <a is="coral-anchorbutton" href="#" variant="quiet" icon="clock" title="Timeline">Timeline</a>
          </coral-actionbar-item>
          <coral-actionbar-item>
            <a is="coral-anchorbutton" href="#" variant="quiet" icon="unmerge" title="References">References</a>
          </coral-actionbar-item>
          <coral-actionbar-item>
            <a is="coral-anchorbutton" href="#" variant="quiet" title="Exit">Exit</a>
          </coral-actionbar-item>
        </coral-actionbar>
      

        <coral-actionbar>
          <coral-actionbar-primary threshold="-1" morebuttontext="More">
            <coral-actionbar-item>
              <button is="coral-button" icon="viewCard">View Card</button>
            </coral-actionbar-item>
            <coral-actionbar-item>
              <button is="coral-button" icon="viewList">View List</button>
            </coral-actionbar-item>
            <coral-actionbar-item>
              <!-- additional nesting, as with fileupload -->
              <span>
                <button is="coral-button">Upload</button>
              </span>
            </coral-actionbar-item>
            <coral-actionbar-item>
              <button is="coral-button" icon="viewColumn">View a <span style="color:red">loooooonoooooog Column</span></button>
            </coral-actionbar-item>
            <coral-actionbar-item>
              <button is="coral-button" class="custom" variant="quiet" disabled="" data-custom="text">Disable action</button>
            </coral-actionbar-item>
          </coral-actionbar-primary>
          <coral-actionbar-secondary morebuttontext="More">
            <coral-actionbar-item>
              <button is="coral-button" icon="search">Search</button>
            </coral-actionbar-item>
            <coral-actionbar-item>
              <button is="coral-button" icon="clock">Timeline</button>
            </coral-actionbar-item>
            <coral-actionbar-item>
              <button is="coral-button" icon="unmerge">References</button>
            </coral-actionbar-item>
            <coral-actionbar-item>
              <button is="coral-button" icon="closeCircle">Exit</button>
            </coral-actionbar-item>
            <coral-actionbar-item>
              <button is="coral-button" icon="add">Create</button>
            </coral-actionbar-item>
            <coral-actionbar-item>
              <button is="coral-button" icon="copy">Copy</button>
            </coral-actionbar-item>
            <coral-actionbar-item>
              <button is="coral-button" icon="move">Move</button>
            </coral-actionbar-item>
            <coral-actionbar-item>
              <button is="coral-button" icon="globe">Publish</button>
            </coral-actionbar-item>
            <coral-actionbar-item>
              <button is="coral-button" icon="globeRemove">Unpublish</button>
            </coral-actionbar-item>
            <coral-actionbar-item>
              <button is="coral-button" icon="delete" style="width:120px">Delete everything currently selected</button>
            </coral-actionbar-item>
          </coral-actionbar-secondary>
        </coral-actionbar>
      

        <coral-actionbar>
          <coral-actionbar-primary>
            <coral-actionbar-item><a href="#" class="coral-Link coral-Link--subtle">Link 1</a></coral-actionbar-item>
            <coral-actionbar-item><a href="#" class="coral-Link coral-Link--subtle">Link 2</a></coral-actionbar-item>
            <coral-actionbar-item><a href="#" class="coral-Link coral-Link--subtle">Link 3</a></coral-actionbar-item>
            <coral-actionbar-item><a href="#" class="coral-Link coral-Link--subtle">Link 4</a></coral-actionbar-item>
            <coral-actionbar-item><a href="#" class="coral-Link coral-Link--subtle">Link 5</a></coral-actionbar-item>
          </coral-actionbar-primary>
          <coral-actionbar-secondary>
            <coral-actionbar-item>
              <button is="coral-button" icon="closeCircle">Exit</button>
            </coral-actionbar-item>
          </coral-actionbar-secondary>
        </coral-actionbar>
      

        <coral-actionbar id="switchBar1">
          <coral-actionbar-item>
            <button is="coral-button" variant="quiet" icon="copy">Copy</button>
          </coral-actionbar-item>
          <coral-actionbar-item>
            <button is="coral-button" variant="quiet" icon="globe">Publish</button>
          </coral-actionbar-item>
          <coral-actionbar-item>
            <button is="coral-button" variant="quiet" icon="globeRemove">Unpublish</button>
          </coral-actionbar-item>
          <coral-actionbar-item>
            <button class="popover-button" is="coral-button" icon="search" title="Delete">Open Popover</button>
            <coral-popover target=".popover-button" placement="bottom">
              <coral-buttonlist>
                <button is="coral-buttonlist-item" icon="add">Add</button>
                <button is="coral-buttonlist-item" icon="move">Move</button>
                <button is="coral-buttonlist-item" disabled="">Delete</button>
              </coral-buttonlist>
              
            </coral-popover>
          </coral-actionbar-item>
          <coral-actionbar-item>
            <button is="coral-button" variant="quiet" icon="copy">Copy</button>
          </coral-actionbar-item>
          <coral-actionbar-item>
            <button is="coral-button" variant="quiet" icon="globe">Publish</button>
          </coral-actionbar-item>
          <coral-actionbar-item>
            <button is="coral-button" variant="quiet" icon="globeRemove">Unpublish</button>
          </coral-actionbar-item>
        </coral-actionbar>