This article describes filters and their implementation. A Tab/Filter gives the user a way to easily switch between views or to filter a set of data.


Tabs / Filters have the following characteristics:

  • Tabs are displayed as a horizontal sequence of buttons.
  • Only one tab can be selected at a time.
  • Tabs are typically placed at the bottom of a view where they are more easily accessed.
  • Tab / Filter button widths vary depending on the number of filters in a single set.
  • There is a minimum of two Tabs / Filters per set and a recommended maximum of five.
  • They may be labeled with either text or icons, but not both.
  • Tabs / Filters are written with title case capitalization and have no ending punctuation.

Tabs / filters can be used for two purposes:

  • Navigation (A) in which to present as a navigational widget for switching between sets of views.
  • Data filtering (B) in which the user can view a single set of data in different ways.

Tabs / Filters can be placed inside a header on the top of the screen, or within the toolbar at the bottom.

Implementation guides

Document Tags and Contributors

Last updated by: mdnwebdocs-bot,