HPE
Design System
Foundation
Components
Templates
Learn
Jump to section
Anatomy
Layer closing behavior
Informational
Actionable
Double confirmations
Examples
Confirming next steps
Highly destructive confirmation
Layer

Center Layer

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

Anatomy

See general layer anatomy for specifications applying to all layers.

Layer closing behavior

The closing behavior and anatomy of a center layer will differ depending on if the layer is informational or actionable.

A center layer should either have actions in the footer or a close button in the header, not both.

Informational

For informational layers that do not require any user actions, place a close icon button in the layer header.

1

Layer title

An optional, concise subtitle for added context.

Layer body content goes here.
Label
Region
Purpose
Required
Notes
1
Close button
Closes the layer.
Use "Close" icon.

The user should be able to dismiss the informational layer by clicking outside, onClickOutside, or using the Escape key, onEsc.

Actionable

For layers that require user actions, place a "Cancel" action alongside the other footer actions. In some cases, a label other than "Cancel" may be appropriate.

1

Layer title

An optional, concise subtitle for added context.

Layer body content goes here.
Label
Region
Purpose
Required
Notes
1
Footer actions
Allows the user to confirm, apply, or cancel the layer's action.
The actions should be right-aligned with primary action on the right. Right-alignment signals progress and forward momentum. One action should be a "Cancel" button that closes the layer, returning the user to the previous state.

To prevent the user from losing progress due to accidental clicks outside of a layer, onClickOutside functionality should not be enabled. The user should be able to dismiss the actionable layer by using the Escape key, onEsc.

Double confirmations

When data has been edited or changed and the user tries to close the layer, a double confirmation should be shown. This helps avoid unintentional loss of work.

Learn more about the anatomy and implementation of a double confirmation on the main layer page since this behavior applies to all layer types.

Examples

Confirming next steps

Highly destructive confirmation

Additional destructive confirmation patterns differing based off of level of severity are coming soon.

Highly destructive actions refer to use cases where large amounts of data will be deleted and cannot be restored. In these instances, have the user type a string that matches the name or path of the object to be deleted. This approach ensures the user is aware of the consequences of the action.

Related

Related content you may find useful when using Center Layer.

Layer

Layer is a component allowing content to be displayed on top of the page the user is currently on.

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.
HPE Filtering Preview

Filtering

Allows users to create a focused data set by specifying data attributes and values of interest.

Still have questions?

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

Edit this page