The application of attributes to find matching items from a data set.


  • Have users select what they want to see rather than deselect what they don’t want to see.
  • As far as results are concerned, when no filters are selected it's the same as all filters being selected.

Filtering Logic

Filters can be “and” or “or” operators:

  • Or – the system finds each result that has ANY of the selected attributes. Within a single category, such as screen size, the filters are “or” operators.
  • And – the system finds each result that has ALL of the selected attributes. Across different categories, such as screen size and hard drive, the filters are “and” operators.

Sometimes a mix of “and” and “or” can be used. For example, product filtering is commonly a mix of both operators.

Filter Stacking

Filter controls conform to space available on any given device. Horizontal rows of several filters is possible on tablet (medium) and desktop (large) but less practical on phone (small). On phone, filters are typically stacked vertically.

Smaller Breakpoints

On smaller breakpoints, filtering is done via an off canvas. In Support and other scenarios, if there are more than five dropdown filters or 10 selectable filters, the experience should likewise use an off canvas.

The off canvas experience provides an always-visible button to “Apply” filters, which helps users easily transition to results.

A filter collection is more practical on larger breakpoints. On smaller breakpoints, it takes up space that's more useful for showing filtered results, and is therefore not shown.

Secondary and Stroke Styling

Filtering components based upon dropdown buttons come in two styles:

  • Secondary button styling is used when filtering is a primary focus of the page. For example, on a product category page.
  • Stroke button styling is used when filtering is a less common action.

Existing Patterns

Filtering makes use of many existing patterns that work in combination, such as dropdown buttons, mini buttons, accordions and inputs

For those filtering components that are button-based, see the usage details for buttons.

For those filtering components that are accordion-based, see the usage details for accordions.

For those filtering components that are input-based, see the usage details for inputs.

Keyword Filtering

Keyword filtering presents the possibility of returning zero results. If this occurs, provide a message at the top of the results area indicating that no results matched the filter.

  • The preferred experience is to avoid zero results by deactivating/graying out options that would return zero results. If the preferred experience is too impractical, then provide a message to indicate there are zero results, using the informational notification pattern.
  • The system logic that prevents zero results and refreshes after each selection can be rather complex, so be prepared for a significant investment in development time to achieve this important UX objective.

Sorting Component

The default sort order, and the order of the options within the dropdown, should reflect the most popular choices for users of the current site segment.

Do's and Don'ts



Common Button Labels and Usage

Title case, 2-3 words maximum.
Do not combine actions in a label (exception: "Customize & Buy").
If standard labels don't fit the button's purpose, align label with the task the user is attempting.

Please refer to the Dell Technologies branding website,, for further information regarding call-to-action labels and usage.

Button Label:
Corresponding Action:
Add to Cart
Sign In/Sign Out
View Details
Learn More
Takes users to Cart page, with item added
Used for search buttons
Takes users back to entry point for a task
Used to save an item
Navigates users to change an item
Deletes an item on the page, usually with a verification step
Used as progression
Used as forward and backward navigation (Next is primary, Previous is secondary)
Used to submit a task or info
Used for choosing items in a task flow
Authentication standard, for consistency do not use Log In/Log Out or Signin/Signout
Used instead of “Select” in cases of product details or within learn content
For use in modal verification steps when more specific CTAs will not fit due to space
Used to link users to more learning content or contextual help
Used within modal windows