HPE
Design System
Foundation
Components
Templates
Learn
Jump to section
When to use
Anatomy
Types of layers
Layer closing behavior
Informational
Actionable
Double confirmations
Modal vs. non-modal
Modal
Non-modal
Action label conventions
Aligning to layer title
Accessibility
Layer titles
Announcing layer open and close
Components

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.

1a
1b
2
3
4
5
7
6

Layer title

An optional, concise subtitle for added context.

Body
Footer
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.

Read guidance

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.

Read guidance

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.

Read guidance

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:

  1. Clicking the close icon button the layer's header.
  2. Clicking outside of the layer, onClickOutside.
  3. 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:

  1. 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.
  2. Clicking the cancel button in the layer's footer.
  3. Pressing the Escape key, onEsc.
  4. 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.

1a
1b
2

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.

Do

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.

Don't

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.

Do

Align the primary action verb with the title.

Discard application?

Your changes will not be applied.

Don't

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.

Applications

0
items

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.

Do

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

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

Body content goes here.
Do

Match the primary action verb to that of the layer's title.

Add pipeline

Body content goes here.
Don't

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 h2 or <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:

  1. When the layer opens.
  2. 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

A center layer should be used for brief, concise confirmations or dialogs.

Side Drawer Layer

When you want to enable a user to maintain the context of their current page, side drawer layers may be used for quickly viewing an object's detail, configuring an object, or applying filter choices.

Fullscreen Layer

Fullscreen layers should be used for large or longer layer content.
HPE Forms Preview

Forms

Common form use cases from application configuration to payment acceptance.

Button

Buttons are graphic elements that indicate to users that actions can be performed.
Hpe Icon Preview

Icons

Icons are an integral part of our visual storytelling style to represent objects, actions, programs and other communicative symbols. This clean, dynamic style remains flexible while retaining the voice of our brand.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page