Home
Components
Action Bar

Action Bar

Use an action bar to display filters, controls, or otherwise important interactions the user can take on the page. Often paired with the sticky utility .pv-sticky to keep the actions persistent as the user scrolls. .pv-action-bar-container can contain one or more child divs. This pattern is necessary to differentiate the v2 style from the v1 style without breaking existing implementations.

Example
The default action bar and a white action bar using data-style="white".

2 Selected

HTML

<div class="pv-action-bar-container">
  <div>
    <p>2 Selected</p>
  </div>
  <div>
    <button class="pv-button-tertiary">
      <svg aria-hidden="true" class="pv-icon">
      <title>new-tab</title>
      <use xlink:href="#new-tab"></use>
    </svg>
      <span>Button</span>
      <svg aria-hidden="true" class="pv-icon">
      <title>chevron-down</title>
      <use xlink:href="#chevron-down"></use>
    </svg>
    </button>
    <button class="pv-button-tertiary">
      <span>Button</span>
      <svg aria-hidden="true" class="pv-icon">
      <title>chevron-down</title>
      <use xlink:href="#chevron-down"></use>
    </svg>
    </button>
    <button class="pv-button-tertiary">
      <span>Button</span>
      <svg aria-hidden="true" class="pv-icon">
      <title>chevron-down</title>
      <use xlink:href="#chevron-down"></use>
    </svg>
    </button>
  </div>
  <div>
    <button class="pv-button-tertiary">
      <svg aria-hidden="true" class="pv-icon">
      <title>check</title>
      <use xlink:href="#check"></use>
    </svg>
    </button>
    <button class="pv-button-tertiary">
      <svg aria-hidden="true" class="pv-icon">
      <title>close</title>
      <use xlink:href="#close"></use>
    </svg>
    </button>
  </div>
  <div>
    <button class="pv-button-ghost-inverse">
      Cancel
    </button>
  </div>
</div>
<div class="pv-action-bar-container" data-style="white">
  <div>
    <p>2 Selected</p>
  </div>
  <div>
    <button class="pv-button-secondary">
      <svg aria-hidden="true" class="pv-icon">
      <title>new-tab</title>
      <use xlink:href="#new-tab"></use>
    </svg>
      <span>Button</span>
      <svg aria-hidden="true" class="pv-icon">
      <title>chevron-down</title>
      <use xlink:href="#chevron-down"></use>
    </svg>
    </button>
    <button class="pv-button-secondary">
      <span>Button</span>
      <svg aria-hidden="true" class="pv-icon">
      <title>chevron-down</title>
      <use xlink:href="#chevron-down"></use>
    </svg>
    </button>
    <button class="pv-button-secondary">
      <span>Button</span>
      <svg aria-hidden="true" class="pv-icon">
      <title>chevron-down</title>
      <use xlink:href="#chevron-down"></use>
    </svg>
    </button>
  </div>
  <div>
    <button class="pv-button-secondary">
      <svg aria-hidden="true" class="pv-icon">
      <title>check</title>
      <use xlink:href="#check"></use>
    </svg>
    </button>
    <button class="pv-button-secondary">
      <svg aria-hidden="true" class="pv-icon">
      <title>close</title>
      <use xlink:href="#close"></use>
    </svg>
    </button>
  </div>
  <div>
    <button class="pv-button-ghost">
      Cancel
    </button>
  </div>
</div>

Sticky Action Bar

Example
The action bar with pv-sticky

Name	Health System	City	State	Beds
Abbeville Area Medical Center	Lafayette General Health	Abbeville	SC	71
Abbott Northwestern Hospital	Allina Health System	Minneapolis	MN	71
Abrazo Arrowhead Campus	Tenet Healthcare Corp.	Phoenix	AZ	71

2 Selected

HTML

<div class="pv-container-sm pv-inset-square-16 pv-surface-accent pv-bordered" style="overflow-x: auto; max-height: 200px;">
  <table class="pv-table-compressed pv-bordered">
    <thead>
      <tr>
        <th>Name</th>
        <th>Health System</th>
        <th>City</th>
        <th>State</th>
        <th>Beds</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <label class="pv-flex">
            <input type="checkbox" class="pv-checkbox" name="name" checked>
            <span>Abbeville Area Medical Center</span>
          </label>
        </td>
        <td>Lafayette General Health</td>
        <td>Abbeville</td>
        <td>SC</td>
        <td>71</td>
      </tr>
      <tr>
        <td>
          <label class="pv-flex">
            <input type="checkbox" class="pv-checkbox" name="name" checked>
            <span>Abbott Northwestern Hospital</span>
          </label>
        </td>
        <td>Allina Health System</td>
        <td>Minneapolis</td>
        <td>MN</td>
        <td>71</td>
      </tr>
      <tr>
        <td>
          <label class="pv-flex">
            <input type="checkbox" class="pv-checkbox" name="name" checked>
            <span>Abrazo Arrowhead Campus</span>
          </label>
        </td>
        <td>Tenet Healthcare Corp.</td>
        <td>Phoenix</td>
        <td>AZ</td>
        <td>71</td>
      </tr>
    </tbody>
  </table>
  <div class="pv-action-bar pv-inset-square-12 pv-radius pv-sticky pv-margin-auto" style="--top: unset; --bottom: 0;">
      <p>10/10 Selected</p>
      <button type="button">Clear All Selections</button>
  </div>
</div>