---
title: Surface
description: 'Surface is a core component that renders a primary background color.'
type: images
slug: /components/surface/
keywords: ['surface', 'background']
---

# Surface

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

## Table of contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

-   [Usage](#usage)
-   [Props](#props)
-   [See Also](#see-also)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

<!-- Automatically Generated. DO NOT EDIT THIS FILE. -->
<!-- Instead, edit packages/website/src/docs/components/core/surface.mdx -->

<!-- props -->

<!-- Automatically Generated -->

## Usage

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

```jsx live
import { Background, Surface, Text } from '@wp-g2/components';
import { ui } from '@wp-g2/styles';

function Example() {
	return (
		<Background css={[ui.padding(5)]}>
			<Surface css={[ui.padding(5)]}>
				<Text>Into The Unknown</Text>
			</Surface>
		</Background>
	);
}
```

## Props

##### backgroundSize

**Type**: `number`

Determines the grid size for "dotted" and "grid" variants.

##### border

**Type**: `boolean`

Renders a border around the entire `Surface`.

##### borderBottom

**Type**: `boolean`

Renders a bottom border.

##### borderLeft

**Type**: `boolean`

Renders a left border.

##### borderRight

**Type**: `boolean`

Renders a right border.

##### borderTop

**Type**: `boolean`

Renders a top border.

##### variant

**Type**: `"grid"`,`"primary"`,`"secondary"`,`"tertiary"`,`"dotted"`

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.
    <!-- /Automatically Generated -->
    <!-- /props -->

## See Also

-   [View](../view/)
-   [Background](../background/)