HPE
Design System
Foundation
Components
Templates
Extend
Components

Layer

The Layer component is flexible and can be used in multiple use cases such as modal, dialogs, or notifications.

Open in Figma
Open docs

Guidance

Layer is used to define the properties and behaviors of an overlay for things like a modal dialog or notification. The content of the Layer is defined by the Box component.

Create

  • Define the container, content, location, and any animation, depending on the intent of the use case (like a notification or modal with a form).
  • Use the Box component to define the content of your layer.
  • Ensure that any next steps for the user are provided to progress or close out of the layer.

Best Practices

  • Modal is best applied when you need to center attention on specific content, a task, or behavior and not allow interactivity with the underlying content.
  • Position forms to the right (side-drawer).
  • Position notifications top or bottom.
  • Use a close control to guide users to move out of the layer. Provide an alternative to move out of the layer by allowing use of the 'esc' key or clicking off the container of the layer.
  • Layer is not great for navigation as it 'hides' content. Maintain context for the user with layer.

Accessibility

Consider the use of ARIA role='dialog' to implement a modal for screen readers.

Variants

Depending on the use case of a Layer, the placement and layout of content may differ. Here are some common use cases and guidelines for various types of Layers.

Side Drawer Modal

A Side Drawer layer is anchored to one side of the screen and acts as a modal. This means that while the layer is open, the rest of the page cannot be interacted with. When a layer contains a Form, it should be anchored to the right side of the screen.

Open docs

Center Modal

A center modal is anchored at the center of the window and acts as a modal. This means that while the layer is open, the rest of the page cannot be interacted with. Center modals may be used to display information without leaving the current context.

Open docs

Notifications

A notification should always be posititioned at either the top or bottom of the window. Assign the modal prop to false to allow the user to continue to interact with the UI even when the notification is open.

Open docs

Related

Related content you may find useful when using Layer.

HPE Forms Preview
Forms
Common form use cases from application configuration to payment acceptance.
Button
Buttons are used to indicate actions that 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