---
name: Divider
menu: Atoms
---

import { Playground, Props } from 'docz';
import Divider, { StaticDivider } from './';
import { Addon, List, ListButton, ListItemBody, Paper } from '../../';
import Archive from '../../entypo/Archive';
import Bell from '../../entypo/Bell';

# Divider
```js
import { Divider } from 'rkta-ui';
```

Divider is a horizontal rule (line) which usually helps to separate content

### Composition

Divider ← [Atom](/src-atoms-atom-atom)

### Props

<Props of={StaticDivider} />

### Basic divider

<Playground>
  <Paper color14>Text 1</Paper>
  <Divider />
  <Paper color14>Text 2</Paper>
</Playground>

### Dotted divider

<Playground>
  <Divider dotted />
</Playground>

### Baseline divider

<Playground>
  <Paper color14>Text 1</Paper>
  <Divider baseline />
  <Paper color14>Text 2</Paper>
</Playground>

### Inset divider

<Playground>
  <List>
    <ListButton>
      <Addon>
        <Archive />
      </Addon>
      <ListItemBody>List item 1</ListItemBody>
    </ListButton>
    <Divider inset />
    <ListButton>
      <Addon>
        <Bell />
      </Addon>
      <ListItemBody>List item 2</ListItemBody>
    </ListButton>
  </List>
</Playground>