COMPONENTS
Accordion
Alert
Avatar
Badge
Bottom Sheet
Breadcrumb
Button
Card
Chart Editor
Charts
Checkbox
Collapse
Datepicker
Dropdown
Flex Layout
Form
Graph
Grid
Header
Horizontal Scroll
Icon
Inputs & Textarea
Label
Link
List Group
Loading
Menu
Metric
Modal
Pagination
Person
Popover
Progress
Pull to Refresh
Queryfield
Radio
React Grid Layout
Search
Select
Side Panel
Skeleton Loader
Slider
Steps
Switch
Table
Tabs
Tag
Toast
Toolbar
Tooltip
Tree
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.
- Container
- Loading Indicator
- Label
The Pull to Refresh component has two core variations — dark or light.
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 should be at the top of the main page container and below any top navigational items.
DO: Consider matching the background color to the surrounding interface or use a compliementary surface color from the color tokens.
DON’T: Use a background color with too much vibrancy. Use the surface token colors.
Contents