Toolbar

tier 2 — classes

The filter bar that sits above a table or list. .toolbar is space-between and wraps; .toolbar-filters groups the controls on the left, and anything after it goes right.

Filters and a count

.toolbar-input narrows a .form-input to a sensible 160px so it does not eat the row. .toolbar-count is the muted result count.

<div class="toolbar">
    <div class="toolbar-filters">
        <input class="form-input toolbar-input" type="search" placeholder="Search orders…" />
        <select class="form-input toolbar-input" aria-label="Filter by assignment group">
            <option>All states</option>
            <option>Pending</option>
            <option>Decided</option>
        </select>
        <label class="form-check"><input type="checkbox" /> Only mine</label>
    </div>
    <span class="toolbar-count">18 of 128</span>
</div>

Filters and actions

Put the buttons on the right; the primary action goes last.

<div class="toolbar">
    <div class="toolbar-filters">
        <input class="form-input toolbar-input" type="search" placeholder="Filter…" />
    </div>
    <div class="toolbar-filters">
        <span class="toolbar-count">6 selected</span>
        <button class="btn btn-sm btn-icon" aria-label="Refresh" data-tip="Reload from the server."><i class="ri-refresh-line"></i></button>
        <button class="btn btn-sm">Export</button>
        <button class="btn btn-sm btn-primary"><i class="ri-add-line"></i> New</button>
    </div>
</div>

With a heading above it

The full top of a list page.

Approval queue

Items the AI proposed and is waiting on a human decision for.

Order	Reservation	Age
ORD-4209	Reroute to EU-West	4 min
ORD-4204	Raise to P2	22 min

<div>
    <h1>Approval queue</h1>
    <p class="lede">Items the AI proposed and is waiting on a human decision for.</p>
    <div class="toolbar">
        <div class="toolbar-filters">
            <input class="form-input toolbar-input" type="search" placeholder="Search…" />
            <label class="form-check"><input type="checkbox" checked /> Hide claimed</label>
        </div>
        <span class="toolbar-count">3 pending</span>
    </div>
    <div class="card">
        <table class="table">
            <thead><tr><th>Order</th><th>Reservation</th><th>Age</th></tr></thead>
            <tbody>
                <tr><td>ORD-4209</td><td>Reroute to EU-West</td><td class="col-muted">4 min</td></tr>
                <tr><td>ORD-4204</td><td>Raise to P2</td><td class="col-muted">22 min</td></tr>
            </tbody>
        </table>
    </div>
</div>

With a selection

Live — open the overflow menu. The same bar in its selected state: the count and the two ways out of it on the leading side, the actions that apply to the selection on the trailing side. Say how many are selected in text, and offer “select all 128” separately — selecting a page is not selecting a result set.

The overflow is a .menu-anchor with data-menu-toggle. Anything destructive goes in there behind .menu-item--danger, and names the count it will act on.

<div class="toolbar">
    <div class="toolbar-filters">
        <label class="form-check">
            <input type="checkbox" checked /> <span>4 selected</span>
        </label>
        <button class="btn btn-sm btn-ghost" type="button">Select all 128</button>
        <button class="btn btn-sm btn-ghost" type="button">Clear</button>
    </div>
    <div class="dr-row dr-gap-2">
        <button class="btn btn-sm btn-go" type="button"><i class="ri-send-plane-line"></i> Dispatch</button>
        <button class="btn btn-sm" type="button"><i class="ri-user-shared-line"></i> Reassign</button>
        <div class="menu-anchor">
            <button class="btn btn-sm btn-icon" type="button" data-menu-toggle
                    aria-label="More actions for the selected orders" aria-expanded="false">
                <i class="ri-more-2-line"></i>
            </button>
            <div class="menu" hidden>
                <button class="menu-item" type="button"><i class="ri-download-2-line"></i> Export as CSV</button>
                <button class="menu-item" type="button"><i class="ri-timer-line"></i> Hold for stock</button>
                <hr class="menu-sep" />
                <button class="menu-item menu-item--danger" type="button">
                    <i class="ri-close-circle-line"></i> Cancel 4 orders
                </button>
            </div>
        </div>
    </div>
</div>