Separator — ARC UI

Components

Separator

content

static

<arc-separator>

Overview

Guidelines

When to use

Use between logical groups of content — form sections, list categories, nav groups
Use the fade variant for subtle breaks inside cards or sidebars
Use a labeled separator for "or" dividers in auth flows or filter groups
Use the vertical orientation to divide side-by-side toolbar groups

When not to use

Stack multiple separators without meaningful content between them
Use a separator when whitespace alone provides sufficient visual grouping
Use the label slot for long text — keep it to one or two words
Use separator as a decorative border — it is a semantic content divider

Features

Horizontal and vertical orientations for flexible layout use
Four line variants: solid, dashed, dotted, and fade (gradient taper)
Optional inline label centered between two line segments
Semantic `role="separator"` with automatic `aria-orientation`
Uses `--border-default` token for consistent theme integration
Exposed CSS parts: separator, line, label for per-instance styling

Preview

Usage

<arc-separator></arc-separator>
<arc-separator variant="dashed"></arc-separator>
<arc-separator variant="fade"></arc-separator>
<arc-separator label="or"></arc-separator>

<!-- Vertical in a toolbar -->
<div style="display: flex; align-items: center; gap: 8px; height: 32px;">
  <span>Left</span>
  <arc-separator orientation="vertical"></arc-separator>
  <span>Right</span>
</div>

import { Separator } from '@arclux/arc-ui-react';

<Separator />
<Separator variant="dashed" />
<Separator variant="fade" />
<Separator label="or" />

<script setup>
import { Separator } from '@arclux/arc-ui-vue';
</script>

<template>
  <Separator />
  <Separator variant="dashed" />
  <Separator variant="fade" />
  <Separator label="or" />
</template>

<script>
  import { Separator } from '@arclux/arc-ui-svelte';
</script>

<Separator />
<Separator variant="dashed" />
<Separator variant="fade" />
<Separator label="or" />

import { Component } from '@angular/core';
import { Separator } from '@arclux/arc-ui-angular';

@Component({
  imports: [Separator],
  template: `
    <Separator />
    <Separator variant="dashed" />
    <Separator variant="fade" />
    <Separator label="or" />
  `,
})
export class ContentSection {}

import { Separator } from '@arclux/arc-ui-solid';

<Separator />
<Separator variant="dashed" />
<Separator variant="fade" />
<Separator label="or" />

import { Separator } from '@arclux/arc-ui-preact';

<Separator />
<Separator variant="dashed" />
<Separator variant="fade" />
<Separator label="or" />

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-separator — requires separator.css + base.css (or arc-ui.css) -->
<div class="arc-separator">
  <div class="separator" role="separator" aria-orientation=""></div>
</div>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-separator — self-contained, no external CSS needed -->
<div class="arc-separator" style="display: block; width: 100%">
  <div style="width: 100%; height: 1px; background: rgb(42, 42, 92)" role="separator" aria-orientation=""></div>
</div>

API

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Controls the divider direction. Vertical separators display as inline-flex with full parent height.
`label`	`string`	`''`	Optional text displayed centered between two line segments. Only applies to horizontal orientation.
`variant`	`'line' \| 'dashed' \| 'dotted' \| 'fade'`	`'line'`	Controls the line style. Fade uses a gradient that tapers to transparent at both ends.

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

ARC UI

Arclight