COMPONENTS

Pull to Refresh

Pull to refresh allows refreshing contents on a touch based device with a drag-down gesture at the top of the page.

pull-to-refresh-intro
pull-to-refresh-anatomy
  1. Container
  2. Loading Indicator
  3. Label

The Pull to Refresh component has two core variations — dark or light.

pull-to-refresh-variations

Within each variation of the banner, the background color can be set to a custom color to match the surrounding display. Colors should be chosen from the color system and contrast for legibility should be taken into account.

pull-to-refresh-background-color

Pull to refresh should be at the top of the main page container and below any top navigational items.

pull-to-refresh-placement
pull-to-refresh-do

DO: Consider matching the background color to the surrounding interface or use a compliementary surface color from the color tokens.

pull-to-refresh-don't

DON’T: Use a background color with too much vibrancy. Use the surface token colors.