---
name: Divider
menu: Components
route: /components/divider
---

import { Playground, Props } from 'docz'
import Divider from './'

# Divider

## Import
`import { Divider } from '@blasterjs/core'`

## Basic Usage

The `Divider` component renders an `hr` by default.

<Playground>
  <Divider />
</Playground>

## Vertical Divider

Use the `vertical` prop to render a `span` as a vertical divider.

<Playground>
  <span>Left text</span>
  <Divider vertical mx="10px" />
  <span>Middle text</span>
  <Divider vertical mx="10px" />
  <span>Right text</span>
</Playground>

## Prop styling

<Playground>
  <Divider
    color="secondary"
    width="80%"
    height="3px"
  />
  <Divider
    vertical
    height="60px"
    width="12px"
    color="red"
  />
</Playground>


## PropTypes
| Prop | Type | Required | Default | Description |
|:-----|:-----|:---------|:--------|:------------|
| vertical | bool | no | `false` | |
| color | string | no | | Theme color or valid css color value  |
| `COMMON` | Style Prop |  |  | see [Style Props](/style-props) |
| `TYPOGRAPHY` | Style Prop |  |  | see [Style Props](/style-props) |
| `FLEX_ITEM` | Style Prop |  |  | see [Style Props](/style-props) |

## Theming

### Schema
```
{
  colors: {
    horizontal,
    vertical,
  },
  sizes: {
    horizontal: {
      width,
      height
    },
    vertical: {
      width,
      height
    }
  },
  overrides: {
    horizontal: css`
        ...
    `,
    vertical: css`
        ...
    `,
  }
}
```

- [Default theme](https://github.com/raster-foundry/blasterjs/tree/master/packages/core/theme/components/divider)
- [Learn more about themeing](/blaster-theme)