Surface Edit

This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.

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>
    );
}

Top ↑

Props

Top ↑

backgroundSize: number

  • Required: No
  • Default: 12

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

Top ↑

borderBottom: boolean

  • Required: No
  • Default: false

Renders a bottom border.

Top ↑

borderLeft: boolean

  • Required: No
  • Default: false

Renders a left border.

Top ↑

borderRight: boolean

  • Required: No
  • Default: false

Renders a right border.

Top ↑

borderTop: boolean

  • Required: No
  • Default: false

Renders a top border.

Top ↑

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.