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.
Layer title
An optional, concise subtitle for added context.
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.
Layer title
An optional, concise subtitle for added context.
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.
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.