Divider

Overview

A divider is a thin line that separates content helping to create visual grouped layouts.

Anatomy

The divider is an hr tag that comprises of a styled border. It can flow horizontal or vertical. The divider is set to be 100% of its container's corresponding width or height depending on the flow of the divider. This means that if you want to restrain its size, you will need to wrap it in a container with the corresponding size.

Props

The divider has a number of props to facilitate a variety of uses. Custom and required props are detailed below:

verticalboolean = false

If provided changes the flow of the divider to vertical.

overridesobject

If provided, overrides the respective presets for the component. Here are the overrides that the Divider accepts:

stylePresetMQ<string>

If provided, overrides the style preset applied to the Divider. The style preset can modify the borderStyle, borderColor and borderWidth.

Refer to the defaults below for the object structure:

{
  stylePreset: "dividerHorizontal"
}

Playground

VerticalUnsettrue

import React from 'react';
import { Divider } from 'newskit';

export default () => <Divider />;

For more information on overriding component defaults, see the docs here.

Spacing

The divider does not apply any spacing presets. So in order to add space around it, you will need to wrap it in a corresponding Block or Stack component, then you can apply the spacing presets to the container. Here are a few examples to demonstrate the usages of a container elements to set spacings:

Note: The divider always stretches to 100% of the corresponding size of the container.

Using Block component

In this example, we are using the Block component to add margin-bottom to each element by using spaceStack: 'space020'. Also, we have a container StyledBlock that has fixed width to restrain the divider's width. It will provide us with the following structure:

In this example we have a horizontal layout of elements separated with vertical dividers. Each element is wrapped inside a Block component that has a spacing preset passed to set the margin-right of each element. The example will look like this:

Using Stack component

In this example we are using a wrapping Stack component with spacing set to sizing030. When you need to use the Divider inside a Stack, you will have to wrap it inside a StackChild component that has a property alignSelf={AlignSelfValues.Stretch} passed to it. This way the divider will automatically stretch to the size of the Stack container.

The same approach can be applied when using a horizontal Divider inside a vertical Stack layout.