The frame component, while not visible in the user interface itself, provides the structure for an application. It wraps the main elements and houses the primary navigation, top bar, toast, and contextual save bar components.


    Down Arrow

    Use to present the frame structure and all of its elements.

    Best practices

    For the best experience when creating an application frame, use the following components:

    • To display the navigation component on small screens, to provide search and a user menu, or to style the frame component to reflect an application’s brand, use the top bar component.
    • To display the primary navigation within the frame of an application, use the navigation component.
    • To tell merchants their options once they have made changes to a form on the page use the contextual save bar component.
    • To provide quick, at-a-glance feedback on the outcome of an action, use the toast component.
    • To indicate to merchants that a page is loading or an upload is processing use the loading component.