Spacer Edit

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

Spacer is a primitive layout component that providers inner (padding) or outer (margin) space in-between components. It can also be used to adaptively provide space within an HStack or VStack.

Table of contents

Top ↑

Usage

Spacer comes with a bunch of shorthand props to adjust margin and padding. The values of these props work as a multiplier to the library’s grid system (base of 4px).

import {
    __experimentalSpacer as Spacer,
    __experimentalHeading as Heading,
    __experimentalView as View,
} from '@wordpress/components';

function Example() {
    return (
        <View>
            <Spacer>
                <Heading>WordPress.org</Heading>
            </Spacer>
            <Text>Code is Poetry</Text>
        </View>
    );
}

Top ↑

Props

Top ↑

margin: number

Adjusts all margins.

  • Required: No

Top ↑

marginY: number

Adjusts top and bottom margins, potentially overriding the value from the more generic margin prop.

  • Required: No

Top ↑

marginX: number

Adjusts left and right margins, potentially overriding the value from the more generic margin prop.

  • Required: No

Top ↑

marginTop: number

Adjusts top margin, potentially overriding the value from the more generic margin and marginY props.

  • Required: No

Top ↑

marginBottom: number

Adjusts bottom margin, potentially overriding the value from the more generic margin and marginY props.

  • Required: No
  • Default: 2

Top ↑

marginLeft: number

Adjusts left margin, potentially overriding the value from the more generic margin and marginX props.

  • Required: No

Top ↑

marginRight: number

Adjusts right margin, potentially overriding the value from the more generic margin and marginX props.

  • Required: No

Top ↑

padding: number

Adjusts all padding.

  • Required: No

Top ↑

paddingY: number

Adjusts top and bottom padding, potentially overriding the value from the more generic padding prop.

  • Required: No

Top ↑

paddingX: number

Adjusts left and right padding, potentially overriding the value from the more generic padding prop.

  • Required: No

Top ↑

paddingTop: number

Adjusts top padding, potentially overriding the value from the more generic padding and paddingY props.

  • Required: No

Top ↑

paddingBottom: number

Adjusts bottom padding, potentially overriding the value from the more generic padding and paddingY props.

  • Required: No

Top ↑

paddingLeft: number

Adjusts left padding, potentially overriding the value from the more generic padding and paddingX props.

  • Required: No

Top ↑

paddingRight: number

Adjusts right padding, potentially overriding the value from the more generic padding and paddingX props.

  • Required: No