# Divider

> Source: https://design.nanatec.co.ke/components/divider/
> A separator between content or layout regions. Supports text/icon labels, line styles, thickness and orientation.

A separator between content or layout regions. Supports text/icon labels, line styles, thickness and orientation.

## Preview

```html
<div style="width:100%">
  <p style="margin:0">Above</p>
  <nana-divider></nana-divider>
  <p style="margin:0">Below</p>
</div>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/divider";
```

## Basic usage

```html
<div style="width:100%">
  <p style="margin:0">Above</p>
  <nana-divider></nana-divider>
  <p style="margin:0">Below</p>
</div>
```

## Variants

```html
<div style="width:100%"><nana-divider variant="solid" thickness="medium"></nana-divider></div>
<div style="width:100%"><nana-divider variant="dashed" thickness="medium"></nana-divider></div>
<div style="width:100%"><nana-divider variant="dotted" thickness="medium"></nana-divider></div>
<div style="width:100%"><nana-divider variant="gradient" thickness="thick"></nana-divider></div>
```

## With a label

```html
<div style="width:100%"><nana-divider>OR</nana-divider></div>
```

## Vertical

```html
<div style="display:flex;align-items:center;height:2rem;gap:1rem">
  <span>Left</span>
  <nana-divider orientation="vertical"></nana-divider>
  <span>Right</span>
</div>
```

## API

## Slots

| Slot | Description |
|---|---|
| `(default)` | Optional label content (text or an icon) centred in the rule |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-divider-color` | — | Line colour |
| `--nana-divider-thickness` | — | Line thickness (overrides the `thickness` attribute) |
| `--nana-divider-gradient` | — | Gradient (gradient variant) |

## CSS Parts

| Part | Description |
|---|---|
| `line` | The rule(s) — two `<hr>` elements when a label is present |
| `label` | The label wrapper |

## Related components

<ul class="related not-content">
  <li><a href="/components/card/">Card</a></li>
  <li><a href="/components/details/">Details</a></li>
  <li><a href="/components/dialog/">Dialog</a></li>
  <li><a href="/components/drawer/">Drawer</a></li>
  <li><a href="/components/popup/">Popup</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-divider--docs