Filter

Filters can be used for two purposes: data filtering, in which the user can view a single set of data in different ways (for example, the Calendar app uses filters to select the time scale to use when viewing data (that is, by day, week, or month); and secondary navigation (presenting a second set of tabs when tabs are already present in your user interface).

Characteristics

• Filters are presented as a horizontal sequence of buttons.
• Only one button is focused at a time.
• The best practice is to place filters within toolbars, so that they don't flow with content.
• Left, middle, and right buttons can be styled uniquely. This lets you make, for example, the left and right ends of your bar take on a "sheen," or to make the bar rounded on the ends.
• Filter buttons' widths vary depending on the number of filters in a single set.
• You must have at least two and no more than five filters in a set.
• A given set of filters may be labeled with either text or icons, but not both. Because filters' heights are relatively small compared to tabs, text is typically the best practice.

Visuals

Variations

There are only two variations: whether the filters are on top or on bottom.

Filters on top

Filters on bottom

Interaction

Tapping on a filter button immediately changes the displayed view to represent the new content.

See also

• Firefox OS user experience