# Separator

A horizontal or vertical rule between content, semantic or decorative.

```ehtml Example
import { Separator } from "@elements/ui/separator";

<Separator />
<Separator orientation="vertical" />
<Separator decorative />
<Separator label="or" />
```

## Parts

| Part | What it is |
|---|---|
| `.separator` | The rule. --separator-width and --separator-color restyle it. |
| `.separator.is-labeled` | A rule with text centered in it. |

## Attributes

| Attribute | Type | Default | Description |
|---|---|---|---|
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Direction of the rule. |
| `decorative` | `boolean` | `false` | Purely visual: role=none, removed from the accessibility tree. |
| `label` | `string` | `""` | Text in the middle of the rule, such as "or". Names a semantic separator. |
| `class` | `string` | `""` | Extra classes. |
| `attrs` | `Record<string, string \| number \| boolean \| undefined>` | `{}` | Any other attributes: id, data-\*. |

## Data attributes

| Attribute | Values | On |
|---|---|---|
| `data-orientation` | `"horizontal" \| "vertical"` | root |

## Accessibility

- role="separator" by default; aria-orientation="vertical" only when vertical, since horizontal is implicit.
- decorative sets role="none" for rules between things that already read as separate.
- A labeled separator is named by its label, because a separator's children are not read.
- Not focusable: a draggable divider is Resizable's job.

## See also

- [Badge](badge): A small label for a status, a count or a category, built on the pill.
- [Card](card): A surface with a header, body and footer, built on the base card styles.
- [Alert](alert): A callout that draws attention to a message, with an icon, a title and an action.
- [Icon](icon): An inline stroke icon from the set the templates draw their own controls with, sized in pixels and colored by the text around it.
- [Kbd](kbd): A keyboard key or shortcut, as text.
- [Skeleton](skeleton): A placeholder shape shown while content loads, or wrapped around the content so it never moves.