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.

Custom Property	Default Value	Description
`--max-width`	360px	Maximum width of the container

Example
The default action bar and an action bar with a primary button.

10/10 Selected

HTML

<div class="pv-action-bar pv-inset-square-12 pv-radius">
  <p>10/10 Selected</p>
  <button type="button">Clear All Selections</button>
</div>
<div class="pv-action-bar pv-inset-square-12 pv-radius">
  <p>10/10 Selected</p>
  <button type="button" class="pv-button-primary">Clear All Selections</button>
</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

10/10 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>