Divider

The Divider is used to visually separate content in a list or group.

Import

copy
import { Divider } from '@trendmicro/react-styled-ui';
import { Divider } from '@trendmicro/react-styled-ui';

Usage

The Divider renders a thin line vertically or horizontally.

EDITABLE EXAMPLE
copy
<Divider />
<Divider />

Orientation

Pass the orientation prop and set it to either horizontal or vertical.

EDITABLE EXAMPLE
copy
<Stack direction="column" spacing="4x">
  <Divider variand="solid" orientation="horizontal" />
  <Divider variant="dashed" orientation="horizontal" />
  <Divider variant="dotted" orientation="horizontal" />
</Stack>
<Stack direction="column" spacing="4x">
  <Divider variand="solid" orientation="horizontal" />
  <Divider variant="dashed" orientation="horizontal" />
  <Divider variant="dotted" orientation="horizontal" />
</Stack>

If the vertical orientation is used, make sure that the parent element is assigned a height.

EDITABLE EXAMPLE
copy
<Stack direction="row" spacing="4x" height="12x">
  <Divider variant="solid" orientation="vertical" />
  <Divider variant="dashed" orientation="vertical" />
  <Divider variant="dotted" orientation="vertical" />
</Stack>
<Stack direction="row" spacing="4x" height="12x">
  <Divider variant="solid" orientation="vertical" />
  <Divider variant="dashed" orientation="vertical" />
  <Divider variant="dotted" orientation="vertical" />
</Stack>

Composition

EDITABLE EXAMPLE
copy
<Flex>
  <Icon icon="align-right" m="1x" />
  <Divider orientation="vertical" />
  <Icon icon="align-center" m="1x" />
  <Divider orientation="vertical" />
  <Icon icon="align-left" m="1x" />
</Flex>
<Flex>
  <Icon icon="align-right" m="1x" />
  <Divider orientation="vertical" />
  <Icon icon="align-center" m="1x" />
  <Divider orientation="vertical" />
  <Icon icon="align-left" m="1x" />
</Flex>

Props