Action bar

The floating action bar is a tool that appears on top of the main layout and enables action execution.

Class Type
action-bar Action Bar A class representing an action bar container
action-bar-start Action Bar start side The content located on the start side of the action bar
action-bar-end Action Bar end side The content located on the end side of the action bar
4 documents selected
<section class="action-bar">
  <div class="action-bar-start u-flex u-gap-8">
    <span class="inline-tag is-info"><span class="text">4</span></span>
    <span class="text">
      <span class="is-not-mobile">documents</span>
      selected
    </span>
  </div>
  <div class="action-bar-end u-flex u-gap-8">
    <button class="button is-text"><span class="text">Cancel</span></button>
    <button class="button is-secondary">
      <span class="text">
        Delete
        <span class="is-not-mobile">selection</span>
      </span>
    </button>
  </div>
</section>