Layer
Layer is a component allowing content to be displayed on top of the page the user is currently on.
When to use
A layer should be used to present information or task flows to the user without navigating them away from their current context.
Anatomy
Basic anatomy and spacing that apply to all layer types.
Layer title
An optional, concise subtitle for added context.
Label | Region | Purpose | Required | Notes |
|---|---|---|---|---|
1 | Header | Identifies the layer. | -- | |
1a | Title | A short, descriptive title identifying the layer. | Implemented as a Heading level 2. | |
1b | Subtitle | Any additional context or information about the layer. | Optional | -- |
2 | Body | Any additional content. | Optional | -- |
3 | Footer | Contains layer actions. | Optional | The ordering and alignment of footer actions depends on the type of layer. |
Label | Property | Value |
|---|---|---|
4 | pad | medium |
5 | gap | medium |
6 | round | small |
7 | elevation | large |
Types of layers
Different use cases and content warrant different layer types. Learn more about each type below.
Center
Use for concise, task-flow oriented or informational content that should appear front and center to the user.
Use cases include: confirmations.
Side drawer
Use for manipulating data on a page or presenting additional information without navigating the user away from their current context.
Use cases include: filtering, editing objects, configuration flows.
Fullscreen
Use when the layer content is dimensionally large or when it is an involved task flow.
Use cases include: creating/editing an object with a lot of attributes, progressive forms revealing inputs based on preceding values, and wizards.
Layer closing behavior
Depending on whether a layer is informational or actionable, the elements and interactions that close a layer differ.
Informational
Informational layers do not require any actions from the user, and therefore do not contain any actions.
The following should cause an informational layer to close:
- Clicking the close icon button the layer's header.
- Clicking outside of the layer,
onClickOutside. - Pressing the Escape key,
onEsc.
Learn more about the specifics of informational center layers, informational side drawer layers, and informational fullscreen layers.
Actionable
Actionable layers require the user to either accept or apply the action prompt in the layer or cancel the action.
The following should cause an actionable layer to close:
- Clicking the close icon button in the layer's header.
- Note: Actionable center layers should not include a close button in the layer's header. Center layers generally present confirmations, therefor the user should intentionally choose between accepting or cancelling the layer's action prompt.
- Clicking the cancel button in the layer's footer.
- Pressing the Escape key,
onEsc. - Clicking an affirmative action such as "save" or "apply."
Clicks outside of an actionable layer, onClickOutside, should not close the layer. Actionable layers present an 'apply' or 'do not apply' choice for which a user should make an intentional choice. Clicks outside of layer do not indicate intent and therefore should not close the layer.
Use of a double confirmation may be desirable as part of the layer's closing behavior in some instances. See more detail about when to use double confirmation.
Learn more about the specifics of actionable center layers, actionable side drawer layers, and actionable fullscreen layers.
Double confirmations
When closing out of an actionable layer containing editable or configurable information, the behavior should err on preventing a user's unintentional loss of work by presenting a double confirmation.
A double confirmation should be shown when data has been edited or changed and the user closes the layer by using the close icon button, cancel button, or Escape key; a double confirmation is not needed upon affirmative actions like 'save' or 'apply'.
Layer state | Confirmation type | Notes |
|---|---|---|
User has not input or changed any data. | No confirmation | The user will not lose anything if the layer closes immediately. |
User has input or changed data. | Double confirmation | The double confirmation should show when the user clicks the "X" or Cancel button, or presses the Escape key. This short confirmation ensures that user's work won't unintentionally be lost. |
Double confirmation anatomy
A double confirmation appears as a center modal. This placement puts the confirmation at the center of the user's attention, reinforcing the importance of the dialog's prompt and minimizing distractions from other page content.
Discard "Add application"?
Your changes will not be applied.
Label | Region | Purpose | Required | Notes |
|---|---|---|---|---|
1a | Title | Explains that data will be discarded when the user closes the layer. | -- | |
1b | Subtitle | To clarify that changes will not be saved. | -- | |
2 | Footer | Contains two actions: "Cancel" and "Discard" | The actions should be right-aligned with primary action on the right, to align with center layer guidance. |
Discard application?
Your changes will not be applied.
Lead with the single action that needs to be confirmed. In most cases, this is "Discard" followed by a noun of what will be discarded.
Are you sure you want to do this?
Your changes will not be applied.
Avoid unnecessary instructions which create uncertainty about what will happen. Avoid phrasing which question the user's intent; instead use phrasing which trusts the intent and confirms.
Discard application?
Your changes will not be applied.
Align the primary action verb with the title.
Discard application?
Your changes will not be applied.
Don’t change the primary action to something generic like "Yes". The user should know the consequence of the button by the label alone.
Double confirmation example
The example below demonstrates how a double confirmation is only used if the layer's content has been changed or edited. A double confirmation is not used if no changes have been made. This behavior errs on preventing unintentional loss of work that a user has done.
First, click "Add application" then click the close button in the layer header. Notice how the layer immediately closes.
Next, click "Add application" again and this time type something into the "Title" input. Now, click the close button. Notice how a double confirmation appears.
Modal vs. non-modal
While layer is the component that drives the layout, elevation, positioning on the screen, modal vs. non-modal effects the behavior to dismiss the layer and interactivity of outside content.
Modal is a specific HTML behavior that excludes interaction with outside elements until it is dismissed.
Non-modal means that the outside content can still be interacted with while the layer is open.
Modal
When a layer is modal, a translucent overlay appears behind the layer and covers the rest of the page content to block the user from interacting with the page until the layer is closed.
Actionable layers should always be modal to ensure user focus is on the layer content and required actions. Modal is the default behavior of a layer.
Non-modal
When a layer is non-modal, there is no translucent overlay that covers the page content, and the page can still be interacted with.
Informational layers can be non-modal. To implement, apply modal={false} to the layer.
Action label conventions
If a layer contains footer actions, the primary action should be labeled using verb + noun format (e.g., "Apply filters").
The noun may be omitted from actions labels beyond the primary action if the action is clear and unambiguous (e.g. "Reset" instead of "Reset filters").
When in doubt, follow the verb + noun convention to ensure clarity. See button labeling guidance for more details.
When secondary actions are clear and unambiguous, you can omit the noun. In this case, "filters" is not repeated for the reset action.
Don’t remove the noun from the primary action as this can cause ambiguity about what the actions refer to.
Aligning to layer title
The primary action verb should match the verb in the layer's title.
Add pipeline
Match the primary action verb to that of the layer's title.
Add pipeline
Don’t use a different verb for the primary action than the layer title's verb.
Accessibility
Layer titles
- Layer headings should be semantically correct.
- Treat a Layer as if it were a stand alone page, with the exception that the first heading within a Layer should be an
h2or<Heading level={2} />. - All subsequent headings should follow typical semantic heading structure.
Announcing layer open and close
It is critical that users of assisstive technologies are informed when a layer opens and closes. The approach to implementation differs. depending on if a layer is modal or non-modal.
Modal layers
For modal layers, use AnnounceContext to ensure it is clear that the layer has opened or closed.
There should be an announcement:
- When the layer opens.
- When the layer closes, specifying if the prompt has been accepted or cancelled.
// Announce on mount const announce = useContext(AnnounceContext); useEffect(() => { announce(`[Insert layer title] modal opened.`, 'assertive'); }, [announce]);
// An announce on the Cancel button clarifies that // the layer has been closed and the layer's prompt // has been cancelled. <Button label="Cancel" onClick={() => { announce(`${title} modal cancelled and closed.`, 'assertive'); onClose(); }} />
Non-modal layers
When using a Layer with modal={false}, it is critical that the focus is moved to the "Close" button inside the Layer. Give the close button an a11yTitle that provides the user with context that they are in a Layer.
For example, implementation of this "Close" button for a Layer would be:
<Button a11yTitle={`You are in a layer containing a form to add new hosts. To close this layer, press Enter.`} icon={<FormClose />} onClick={() => setShowLayer(false)} autoFocus />
Related
Related content you may find useful when using Layer.
Center Layer
Side Drawer Layer
Fullscreen Layer
Forms
Button
Icons
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.