Surface

Surface is a core component that renders a primary background color.

Usage

In the example below, notice how the Surface renders in white (or dark gray if in dark mode).

import {
    __experimentalSurface as Surface,
    __experimentalText as Text,
} from '@wordpress/components';

function Example() {
    return (
        <Surface>
            <Text>Code is Poetry</Text>
        </Surface>
    );
}

Props

backgroundSize: number

• Required: No
• Default: 12

Determines the grid size for “dotted” and “grid” variants.

borderBottom: boolean

• Required: No
• Default: false

Renders a bottom border.

borderLeft: boolean

• Required: No
• Default: false

Renders a left border.

borderRight: boolean

• Required: No
• Default: false

Renders a right border.

borderTop: boolean

• Required: No
• Default: false

Renders a top border.

variant: string

• Required: No
• Default: false
• Allowed values: primary, secondary, tertiary, dotted, grid

Modifies the background color of Surface.

• primary: Used for almost all cases.
• secondary: Used as a secondary background for inner Surface components.
• tertiary: Used as the app/site wide background. Visible in dark mode only. Use case is rare.
• grid: Used to show a grid.
• dotted: Used to show a dots grid.