Grouped filter

Last updated: June 2017

A grouped filter is a way to filter views between contextually-related content or related items. Grouped filters should never replace tab navigation and will always sit below tabs to be used as a secondary way of viewing items.


Grouped filters may have 2, 3 or 4 options for toggling:


The grouped filter should have a height of 34px that remains evenly full-width no matter the number of options you have.

The grouped filter has a 1px Grey Lighten 2 border and 4px border radius.

Default Button

Background color is transparent with regular font-weight Blue text and 4px border radius. Android text style uses all caps.

Selected Button

Background color is link Blue with regular font-weight white text and 4px border radius.


The spacing between the outline and the fill selections should be 2px

The spacing between the grouped filter and other elements on a page should be 4px top and bottom


No more than one word should be shown within a button. Don’t use icons within the grouped filter buttons.


Use one word within a filter view


Use more than one word within a filter view


Use icons within a filter view with text

Scrolling & Swiping


User must tap on the view they would like to see - they may not swipe or scroll left or right to switch views


If used in an area where the grouped filter must remain visible rather than being scrolled away - apply the card details shadow to the white background component and have all content scroll underneath