Panel
Panels present supplemental information and input methods directly related to the primary content.
- Skin
- CoreUI
- React
Panels present supplemental information and input methods directly related to the primary content.
Expanded component guidance coming soon.
This page will be updated soon with expanded guidance and clarity from Design, Platform, and Accessibility teams.
A title is required for all panels. The title should explain what is occurring in the panel.
The action in the header can be a close icon or a text button depending on the type of content. The close icon is the default action. To avoid ambiguity, use a text button in situations that involve submitting data.
Panels can contain up to two actions in the footer. The primary action should complete the panel’s task and close the panel. Alternative tasks appear as link buttons pinned to the left.
Panels can be modal or non-modal. Modal panels present over a scrim that disables interaction with the base layer. Non-modal panels omit the scrim and allow users to manipulate content on the base layer. Modal is the default presentation for panels.
Use a modal panel when manipulating data that will update the base layer or when the content on the base layer is complex and distracting. Use a non-modal panel for content that is purely referential and doesn’t update data.
Panels can be dismissed in various ways:
Dismissing the panel via the scrim, close button, or swipe gesture will typically cancel any action taken within the panel. However, if the base layer updates asyncronously those changes can be retained when closed.
Panels can include simple navigation between related content. A back action will appear in the header if a user navigates to a different section.
Aim to keep navigation to a minimum, no more than one or two levels deep. If content needs to go deeper, link to a new tab for a full page experience.
Keep content in panels short and concise. Panels should act more as a launch pad or quick input device. Focus on a single topic or task and keep scrolling to a minimum. Links to long-form content should open in a new browser tab and use an external link icon.
Panels convert to fullscreen overlays or spoke pages on screens smaller than 600px.