A-One Design System

PATTERN: results-toolbar
COMPOSES: form-select (sort), pagination (pagination)
STATES: List view active · Map view active · Courses view active

Horizontal toolbar that sits above the consumer results list. Left side: a segmented 3-button view-mode switcher (list / courses / map). Right side: sort-by select, results count text, and pagination. The sort select uses the existing form-select; pagination uses pagination.

1. List view active — sort by Distance

Default state: List-view button active (white bg + primary ink). Sort select shows "Sort by: Distance". 24 results, page 1 of 5.

<div class="results-toolbar">
  <div class="results-toolbar-views" role="group">
    <button class="results-toolbar-view-btn active" aria-pressed="true">...</button>
    ...
  </div>
  <div class="results-toolbar-sort"><select class="form-select form-select-sm">...</select></div>
  <span class="results-toolbar-count">24 results found</span>
  <nav class="results-toolbar-pagination">...</nav>
</div>

2. Map view active

Map view: Map-view button active. Sort select shows "Sort by: Highest rated". Results count and pagination remain visible above the map.

3. Courses view active

Courses view: Courses button active. Sort select shows "Sort by: A–Z". Results count shows 38 courses found.