# Divider

> Horizontal separator. Solid, dashed, or dotted; tinted with any theme color.

Source: https://ngwr.dev/reference/components/divider  
Kind: Component, Standalone

## Installation

```angular-ts
import { WrDivider } from 'ngwr/divider';

@Component({ imports: [WrDivider] })
export class MyComponent {}
```

## Basic usage

```html
<wr-divider />
```

## Line styles

```html
<wr-divider type="solid" />
<wr-divider type="dashed" />
<wr-divider type="dotted" />
```

## Colors

```html
<wr-divider color="primary" />
<wr-divider color="success" />
```

## Width

```html
<wr-divider [width]="3" color="primary" />
```

## With label

Project content between the tags to render a label inline with the line. Use `align` to push it to the start or end.

```html
<wr-divider>OR</wr-divider>
<wr-divider align="start">Section</wr-divider>
<wr-divider align="end" type="dashed">Footnotes</wr-divider>
```

## Long label

Long labels wrap naturally without breaking the line halves. Useful for inline section descriptions.

```html
<wr-divider>Continued from the previous chapter — see appendix B for derivations</wr-divider>
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `color` | Color of the divider line. Omit for the neutral default. | `WrColor \| null` | `null` |
| `type` | Line style. | `WrDividerType` | `'solid'` |
| `width` | Line width in pixels. | `number` | `1` |
| `align` | Label position. Only meaningful when the divider has projected content — otherwise the line is symmetric and alignment has no visible effect. | `WrDividerAlign` | `'center'` |

## CSS variables

Custom properties `ngwr/divider` publishes. Each default below is declared on the component's own selector, so a `:root` override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.

| Variable | Default | Declared on |
| --- | --- | --- |
| `--wr-divider-aside` | `1rem` | `.wr-divider` |
| `--wr-divider-color` | `var(--wr-color-outline)` | `.wr-divider` +1 variant override |
| `--wr-divider-gap` | `0.75rem` | `.wr-divider` |
| `--wr-divider-style` | `solid` | `.wr-divider` +2 variant overrides |
| `--wr-divider-width` | `1px` | `.wr-divider` |