Skip to main contenteBay Playbook

Quick filter

v3.1.0

Quick filter buttons make filtering or sorting data fast and easy.

Stylized artwork of a dropdown quick filter.

Considerations

Relevant

The relationship between filter buttons and the content is direct and clear.

Lightweight

Quick filters don’t dominate or interrupt the hierarchy. They represent small bits of data at a time.

Convenient

Quick filters make things easier to sort or filter content within one or two taps.

Anatomy

A dropdown quick filter diagram with 3 elements numbered: 1. Title, 2. Counter, 3. Chevron.
  1. Title
  2. Counter
  3. Chevron

Properties

Title

A title is required for all filter buttons. The filter should represent the discrete value applied when selected or succinctly summarize the type of values contained in a dropdown filter.

A selected dropdown quick filter with the title ‘Decor style (2) sits beside a discrete quick filter with the title ‘Free shipping’.

Width

Quick filters have a maximum width of 256px and a minimum width of 2x its height.

A dropdown quick filter with a width of 100px sits above a discrete quick filter with a width of 64px.

Discrete filter

Quick filters that represent a single discrete value will immediately filter the list when selected. They can be unselected by interacting with the filter button again. Discrete filters are the default and preferred version because they only require a single interaction.

Four single discrete quick filters: Unpaid, Ready to ship, In transit, and Delivered. Ready to ship is the only filter in a selected state.

Dropdown filter

Quick filters can use a popover menu or bottom sheet to present a popular group of options. The filter can be multi-select or single-select.

Four dropdown quick filters: Brand, Color, Price range, and Size. Color is in a selected state with a counter of 2 and a dropdown of 5 options with checkboxes: Red, Blue, Black, White, and Green. Black and White are both selected.

Single-select dropdown

Dropdown filters that represent a radio group apply a value immediately after selecting it in the menu. The label is updated to represent the value selected. The filter can be reset by tapping a clear all action in the filter bar or selecting the default value within the menu.

Four dropdown quick filters: Brand, Color, $101 to $500, and Size. $101 to $500 is in a selected state with a single select dropdown of 5 options: Any, $0 to $100, $101 to $500, $501 to $1000, and $1001+. $101 to $500 is selected.

Multi-select dropdown

Dropdown filters that represent a checkbox group have checkboxes next to each value label within the menu. Selecting values appends a counter to the label representing how many values are being applied.

The data set should asynchronously update as each value is selected within a menu. If asynchronous updates aren’t possible, an apply button needs to be present to submit the selection.

Four dropdown quick filters: Brand, Color, Price range, and Size. Size is in a selected state with a counter of 2 and a dropdown of 5 options with checkboxes: X-small, Small, Medium, Large, and X-large. Medium and Large are both selected.

Behavior

Counter

A counter is appended to the label when multiple values are selected within multi-value dropdown filters.

Five quick filters: All filters, Brand, Color, Price range, and Size. The All filters quick filter is selected, showing an action button with a counter of 4. The other filters are dropdown quick filters. The Size filter is also selected, displaying a counter of 2.

Selection

The selection state toggles on and off for discrete filters. Dropdown filters stay in the selected state as long as at least one value is selected.

A quick filter group containing four filters: Unpaid, Ready to ship (in a selected state), In transit, and Delivered, is sitting above a quick filter group containing four filters: All filters (with a counter of 3 and in a selected state), Size, $101 to $500 (in a selected state), and Size (in a selected state with a counter of 2).

Screen sizes

Small

A ‘Camping tents’ page on eBay mobile web features four quick filters, with the ‘Size’ quick filter in a selected state.. The ‘Size’ quick filter features a counter of 2, and four checkbox options below in a dropdown popover: 1 person, 2 person, 3-4 person, and 5-7 person. 3-4 person and 5-7 person are selected.

Web

Quick filters use the default popover to display menu options on web.

A ‘Camping tents’ page on the eBay mobile app features four quick filters, with the ‘Size’ quick filter in a selected state. The ‘Size’ quick filter features a counter of 2, and four checkbox options are displayed in a bottom sheet: 1 person, 2 person, 3-4 person, and 5-7 person. 3-4 person and 5-7 person are selected.

Native

Quick filters use the sheet to display menu options on native.

Medium and large

A ‘Camping tents’ page on eBay web features four quick filters, with the ‘Size’ quick filter in a selected state.. The ‘Size’ quick filter features a counter of 2, and four checkbox options below in a dropdown popover: 1 person, 2 person, 3-4 person, and 5-7 person. 3-4 person and 5-7 person are selected.

Best practices

Label length

Keep labels short. If the label is too long, see if the filter can be broken into smaller pieces or summarized more succinctly.

Two discrete quick filters: ‘World War 1’ and ‘World War 2’.

Don’t override the height of quick filter buttons to allow label wrapping. Allow the label to be truncated if it cannot be reduced. The label can be revealed in a tooltip on hover or focus.

Two discrete quick filters: ‘World War 1’ and ‘World War 2 (1930 - Now) - Radio, Phonograph, TV, Phone’.

Icons

The discrete filter selected state toggles on and off.

Five discrete quick filters: ‘64GB’, ‘128GB’. , ‘256GB’, ‘512GB’, and ‘1TB’. 256GB’ is in a selected state.

Don’t override the component to add additional icons.

Five discrete quick filters: ‘64GB’, ‘128GB’. , ‘256GB’, ‘512GB’, and ‘1TB’. 256GB’ is in a selected state with a trailing ‘x’ icon.

Specs

Three quick filters with specs shown. Quick filter specs: The height of the quick filter is 32px, the padding on the left and right content inside of the of the quick filter is 16px, the padding between the leading filter icon and the title is 4px, the padding between the title and counter is 2px, the padding between the counter and trailing chevron icon is 4px.

Change log

VersionDateNotes
3.1.0
Oct, 2024
  • Updated to eBay Evo
3.1.0
Apr, 2023
  • Updated 12px chevrons to use 12px artboards and updated specs
3.0.0
Feb, 2023
  • Updated enabled state to use border.default
  • Update borderWidth of selected state
  • Integrated state-layer component to handle interaction logic
  • Dark mode toggle to be replaced by plugin tooling
2.1.0
Apr, 2022
  • Updated selected state style to have a bolder outline
  • Updated hover state to use state-layers