Divider

This component is deprecated. Prefer a Separator subcomponent such as Menu.Separator when the surrounding component provides one. Otherwise write your own CSS, preferably using the design tokens available in @wordpress/theme.

Divider is a layout component that separates groups of related content.

Usage

import {
    __experimentalDivider as Divider,
} from `@wordpress/components`;
import { Stack } from '@wordpress/ui';

function Example() {
    return (
        <Stack direction="column" gap="lg">
            <span>Some text here</span>
            <Divider />
            <span>Some more text here</span>
        </Stack>
    );
}

Props

margin: number

Adjusts all margins on the inline dimension.

• Required: No

marginEnd: number

Adjusts the inline-end margin.

• Required: No

marginStart: number

Adjusts the inline-start margin.

• Required: No

orientation: horizontal | vertical

Divider’s orientation. When using inside a flex container, you may need to make sure the divider is stretch aligned in order for it to be visible.

• Required: No
• Default: horizontal

Inherited props

Divider also inherits all of the Separator props.