fannypack/src/Divider/Divider.mdx

An accessible, composable, and friendly React UI Kit

---
name: Divider
route: /elements/divider
menu: Elements
---

import { Playground, PropsTable } from 'docz';
import Divider from './index';
import { Box, Block, Flex } from '../index';

# Divider

## Import

`import { Divider } from 'fannypack'`

## Basic Usage

`<Divider>` renders a `<hr>` element with reset styles and basic divider styling.

<Playground>
  <Divider />
</Playground>

## Vertical

Render a vertical divider by adding the `isVertical` prop to the component.

<Playground>
  <Flex>
    Hello
    <Divider isVertical />
    World
  </Flex>
</Playground>

## With content

A divider can also have content. The `content` prop accepts a string.

<Playground>
  <Flex alignItems="center" height="50px">
    Hello
    <Divider content="or" isVertical />
    World
  </Flex>
  <Box textAlign="center" marginTop="xsmall">
    Hello
    <Divider content="or" />
    World
  </Box>
</Playground>

## Props

<PropsTable of={Divider} />

## Theming

### Schema

```jsx
{
  base: string | Object,
  content: string | Object,
  vertical: string | Object
}
```