Grouped filter

Components

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.

Options

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

Styling

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.

    Spacing

    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

    Language

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

    Do

    Use one word within a filter view

    Don't

    Use more than one word within a filter view

    Don't

    Use icons within a filter view with text

    Scrolling & Swiping

    Horizontal

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

    Vertical

    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