Surface

The Surface component is used to structure content on a page.

Import

import { Surface } from '@dynatrace/strato-components-preview/layouts-core';

Use cases

The Surface component offers different visual styles depending on the elevation level. By default, the elevation is set to flat.

CodeSandbox

Use the selection style

The selection style can be applied with different colors, which is set to neutral by default. You should always consider the meaning behind the colors when changing this. The color also defines the color of the focus style that is applied when a Surface is interactive and is focused.

CodeSandbox

Make the Surface interactive

In some cases, the surface itself shall be interactive. Most of the time, polymorphing it into a button or link should be the best way. One caveat is not to nest other interactive elements inside an already interactive surface since this leads to a11y implications.

However, the surface is not automatically considered interactive when a tabIndex of 0 is set, in this case the focus styles are applied but no other interactive styling.

CodeSandbox

Polymorph the Surface component

By default, the Surface component is rendered as a standard div element. For layouting purposes, the component can be polymorphed to any other component. This can be used, for example, to create a Flex layout inside a Surface component. You can also polymorph the Surface into an interactive element, such as a button or link if you want users to interact with the Surface.

CodeSandbox

Add layout styles to the Surface component

The Surface component has a default padding of 24px. This can be changed by setting any padding prop on the container. Similarly, the container also accepts any CSS margin and layout props, such as width or height.

CodeSandbox

Props

SurfaceProps

Signature:

export declare type SurfaceProps<E extends > = <E, >;

SurfaceOwnProps

extends, , , ,

Name	Type	Default	Description
color?	| | | |	'neutral'	Color of the border when the surface has focus or is selected.
selected?		false	Defines if the surface is selected and should indicate that state with a border.
dragged?		false	Indicates if the surface is currently dragged and then applies the corresponding styles.
elevation?	| |	'flat'	Defines the surface's elevation to the background.