Divider

If you have two things that need to be separated, put a Divider between them.

Props

Component props
Name	Type	Default
No properties

Variants

Orientation

You can use this component for a visual divider between two elements. Placing it within a Flex layout with a direction of row will cause the Divider to become vertical.

Some content

Other content

<Box color="white" width="100%">
  <Box padding={2}>
    <Text>Some content</Text>
  </Box>
  <Divider />
  <Box padding={2}>
    <Text>Other content</Text>
  </Box>
</Box>

<Box color="white" width="100%">
  <Box padding={2}>
    <Text>Some content</Text>
  </Box>
  <Divider />
  <Box padding={2}>
    <Text>Other content</Text>
  </Box>
</Box>

Horizontal

Some content

Other content

<Flex>
  <Box padding={2}>
    <Text>Some content</Text>
  </Box>
  <Divider />
  <Box padding={2}>
    <Text>Other content</Text>
  </Box>
</Flex>

<Flex>
  <Box padding={2}>
    <Text>Some content</Text>
  </Box>
  <Divider />
  <Box padding={2}>
    <Text>Other content</Text>
  </Box>
</Flex>

Vertical

Edit page on GitHub