# dds-divider



<!-- Auto Generated Below -->


## Overview

A thin line that separates content into sections, horizontal or vertical. It is a separator to assistive technology; set `aria-label` on the host to name it.

## Usage

### Divider

#### Between sections

A horizontal divider runs the full width of its container. Set `margin="normal"` to add standard spacing above and below it.

```html
<p>Section 1</p>
<dds-divider margin="normal"></dds-divider>
<p>Section 2</p>
```

#### Between inline items

Set `orientation="vertical"` to separate items laid out in a row. The divider stretches to the height of a flex container.

```html
<div style="display: flex; align-items: center; gap: 8px">
  <span>Item 1</span>
  <dds-divider orientation="vertical"></dds-divider>
  <span>Item 2</span>
</div>
```

#### Accessible name

A divider is a separator to assistive technology. It needs no name, but set `aria-label` on the element to give it one.

```html
<dds-divider aria-label="End of introduction"></dds-divider>
```



## Properties

| Property      | Attribute     | Description                                                          | Type                         | Default        |
| ------------- | ------------- | -------------------------------------------------------------------- | ---------------------------- | -------------- |
| `margin`      | `margin`      | Whether to add standard spacing around the line.                     | `"none" \| "normal"`         | `"none"`       |
| `orientation` | `orientation` | Whether the line runs across the inline axis or down the block axis. | `"horizontal" \| "vertical"` | `"horizontal"` |


## Shadow Parts

| Part     | Description      |
| -------- | ---------------- |
| `"root"` | The line itself. |


----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*