Skip to main contenteBay Playbook

Filter bar

v1.0.0

A filter bar is a collection of components that provide controls to give users more agency over their content or data sets.

  • Skin
  • CoreUI
  • React
Stylized artwork of a filter bar.

Anatomy

A filter bar diagram is shown with 3 elements numbered: 1. All filters action, 2. Action group, 3. Filter group.
  1. All filters action
  2. Filter group
  3. Action group

Properties

Filter group

The filter group contains all filter-related buttons. The lead filter button includes a generic “All filters” button that launches a sheet with all available filters.

A filter group containing an ‘All filters’ button and dropdown filters.

Action group

The action group contains up to 3 non-filter actions. Additional actions can be collapsed into an overflow icon button in the first position.

An action group containing a ‘Create new’ button, an ‘Add discount’ button, and an overflow icon button.

Behavior

Overflow

If the filter bar does not have an action group, the filter group will be scrollable as filter buttons extend beyond the viewport. When scroll is enabled a transparent gradient overlay displays over the filter group as a visual affordance for the scrollable area.

A horizontal swiping gesture is shown on a filter group that is in mid-scroll.

Screen sizes

Small

Actions are collapsed into an overflow and quick filter buttons are hidden on smaller screens.

The action group collapses into an overflow first, followed by the trailing filter buttons in the filter group.

An order screen on the eBay mobile app with a filter group containing a search button, an ‘All filters’ button, a ‘Status’ dropdown filter, and an overflow button.

Medium

Filter and action group content remain visible as space permits. The action group will collapse into an overflow first, followed by the trailing filter button.

An order screen on a medium eBay screen with a filter group containing a search button, an ‘All filters’ button, a ‘Status’ dropdown filter, a ‘Categories’ dropdown filter, a ‘Period’ dropdown filter, a ‘Notifications’ dropdown filter, and an overflow button.

Large

Large screens surface up to the maximum number of content in each group as space permits.

An order screen on a large eBay screen with a filter group containing a search button, an ‘All filters’ button, a ‘Status’ dropdown filter, a ‘Categories’ dropdown filter, a ‘Period’ dropdown filter, a ‘Notifications’ dropdown filter, and an overflow button.

Best practices

Non-stacking

Content within the filter bar remains on a single line.

A filter group placed on one line and spans across the mobile screen.

Don’t wrap content within the filter bar.

A filter group placed on two lines.

Selected position

Do maintain each filter button’s original position as selections are made. For more details, see Quick filter.

A filter group is shown containing a ‘Filters’ all filters selected action button with a counter of 2, a ‘Size’ dropdown button, a ‘$101 to $500’ selected dropdown filter, and a Color dropdown filter.

Don’t change the position of filters as selections are made.

A filter group is shown containing a ‘Filters’ all filters selected action button with a counter of 2, a ‘$101 to $500’ selected dropdown filter, a ‘Size’ dropdown button, and a Color dropdown filter.

Specs

Three filter groups are shown with specs highlighted. The padding above and below the action groups is 16px. The padding between filters is 8px. There is a minimum of 48px space necessary between filters and the overflow button. The padding between the action group buttons is 8px.

Change log

VersionDateNotes
1.0.0
Sep, 2024
  • Updated to eBay Evo
1.0.0
Mar, 2024
  • Initial release