Action Bar

The Action Bar pattern is a form that sits on top of a visual dataset; like a data table or a grid of product cards, for example. It modifies its dataset on submission. Common actions include filtering, searching and paginating.

Design

Usage:

The action bar component is a form that sits on top of a visual dataset; like a list of customers or a grid of product cards, for example.

The action bar's function is to modify its dataset on submission. Common actions include filtering, searching and paginating.

The default behaviour of each .actionBar-section is to float left inside the action bar. We also provide and .actionBar-section--alt which floats to the right. This is also the default behaviour for pagination.

HTML

<form class="actionBar">
    <fieldset class="form-fieldset actionBar-section">
        <div class="form-field">
            <button class="button" type="submit">
                Add
            </button>
            <button class="button button--icon">
                <span class="u-hiddenVisually">Remove</span>
                <icon glyph="ic-delete"></icon>
            </button>
        </div>
    </fieldset>

<fieldset class="form-fieldset actionBar-section">
        <div class="form-field">
            <select class="form-select" name="select1" id="select1">
                <option>Choose an action</option>
                <option value="1">Bulk Edit Selected</option>
                <option value="2">Label all options</option>
            </select>
        </div>
    </fieldset>

<fieldset class="form-fieldset actionBar-section">
        <div class="form-field">
            <input class="form-input has-action"
                   placeholder="Filter"
                   type="search">
            <button class="button button--icon button--inputAction">
                <span class="u-hiddenVisually">Filter</span>
                <icon glyph="ic-filter-list"></icon>
            </button>
        </div>
    </fieldset>
    <a class="actionBar-section" href="#">
        Search
    </a>
</form>

Usage:

The action bar component is a form that sits on top of a visual dataset; like a list of customers or a grid of product cards, for example.

The action bar's function is to modify its dataset on submission. Common actions include filtering, searching and paginating.