Skip to main content

Surface

Use the Surface component to structure and visually separate content on a page, or to create floating overlays such as menus, selects, and modals.

OverviewPropertiesUsage

When to use​

  • To structure and visually separate content on a page.
  • To overlay other content with floating elements such as Menu overlays, Select overlays, or Modal dialogs.

When not to use​

  • When you need semantic color emphasis for grouped content. Use Container instead.

Elevations​

Surfaces come with three possible elevation levels and are, together with Tooltip components, the only user interface elements that can overlay other content.

Examples of Surface components with different elevation property values.

Examples of Surface components with different elevation property values.

Flat​

  • Use flat elevation for most cases. Flat surfaces don't have a drop-shadow and are the most common variant to structure content.

Raised​

  • Use raised elevation to emphasize surfaces that need to draw extra attention.
  • Use raised surfaces sparingly to retain their purpose of establishing visual hierarchy.

Floating​

  • Use floating elevation if the surface overlays other content, such as Menu overlays, Select overlays, or Modal dialogs.

Colors​

Surfaces come in five semantic colors, which are noticeable when interactive and selected or focused.

Examples of Surface components with different color property values.

Examples of Surface components with different color property values.

Neutral​

  • Use the neutral color for surfaces that shouldn't stand out.
  • Use the neutral color to indicate that a surface is currently selected.
  • The neutral color has no semantic meaning and is therefore usually applicable.

Primary​

  • Use the primary color to highlight a surface without conveying concern.
  • Use primary colored surfaces sparingly, ideally once per view or context at most.
  • Avoid using the primary color to indicate a selected surface. Use 'neutral' instead.

Success​

  • Use the success color to indicate a positive condition of the surface's content.
  • Avoid over-using it to keep the emphasis on problematic conditions that require attention.

Warning​

  • Use the warning color to indicate an upcoming or potential negative condition of the surface's content.

Critical​

  • Use the critical color to indicate a negative condition of the surface's content that requires immediate attention.
Tip

Learn more about the semantic meaning of colors in Status and health.

Still have questions?
Find answers in the Dynatrace Community