Refreshing views

Recommended behavior

By default, a view should update automatically whenever there is a change in the API. This is known as a push model. If your API doesn’t provide that functionality, we recommend that you refresh a page at a certain interval of time, typically every 10 seconds. This is known as a pull data model.

If users want to refresh the content, they can use the refresh button on their browser.

Add a refresh button only as a fallback

We don’t recommend adding refresh buttons in the interface unless users need to refresh only a part of the interface.
If you can’t ensure a periodic refresh of the data, and users need to take an action to refresh the view or parts of the view, include a refresh button as part of the header.

Accessibility

Make the refresh button accessible by providing a label (aria-label). Describe the action by setting the ariaLabel property in the button component.

Refreshing tables and cards

Refresh button location

Resources

Variable name
Current value
Description
Item 1FirstThis is the first item
Item 2SecondThis is the second item
Item 3ThirdThis is the third item
Item 4FourthThis is the fourth item
Item 5FifthThis is the fifth item
Item 6SixthThis is the sixth item

Loading state

Resources

Variable name
Current value
Description
Loading resources

Refreshing form controls

Refresh button location

Loading state



General guidelines

Do

  • If your API supports a push model, by default, refresh the view when the API changes.
  • If your API doesn't support a push model, refresh the page at a certain interval of time, typically every 10 seconds (pull data model). Note: If users want to refresh the content, they can use the refresh button on their browser.
  • If you must use a refresh button, include the button as part of the header actions.

Don't

  • Don't add refresh buttons in the interface, except when users need to perform an explicit action to refresh only a part of the interface.

Writing guidelines

Loading message

  • Use the format: Loading {resources}

    • For example: Loading security groups.

  • Use sentence case (not title case).

  • Don't use end punctuation.



Accessibility guidelines

If you must use a refresh button, make it accessible by providing a label (aria-label). Describe the refresh action by setting the ariaLabel property in the button component.