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 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/ui'; function Example() { return ( <Surface> <Text>Code is Poetry</Text> </Surface> ); }
Props Props
backgroundSize
: number backgroundSize
: number
- Required: No
- Default:
12
Determines the grid size for “dotted” and “grid” variants.
borderBottom
: boolean
borderBottom
: boolean
- Required: No
- Default:
false
Renders a bottom border.
borderLeft
: boolean
borderLeft
: boolean
- Required: No
- Default:
false
Renders a left border.
borderRight
: boolean
borderRight
: boolean
- Required: No
- Default:
false
Renders a right border.
borderTop
: boolean
borderTop
: boolean
- Required: No
- Default:
false
Renders a top border.
variant
: string
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 innerSurface
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.