If you have any project questions, concerns, or contribution ideas, join our #pwa Slack channel. Find out how to create an account by visiting Community Resources

Sort

Description Reference image
Sort button Filter bar
Sort overlay Category sort

Visual specifications

Button specifications

A button with the text: Sort.

Overlay specifications

The sort overlay is anchored to the bottom, left, and right sides of the screen. It masks the content below and should never be taller than 3/4 of the viewport height.

Interactions

Button interactions

  • Tap - Tapping the Sort button pulls up an overlay from the bottom with sort parameters.

Overlay interactions

  • Tap - Tapping on the overlay dismisses the sorting sheet without applying the parameter.

    Tapping the Apply button in the overlay executes the sort using the parameters and moves the overlay downwards and out of view.