Separator
Visual divider for separating content sections. Supports horizontal and vertical orientations, multiple line styles, and optional inline labels.
<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
- Do not Stack multiple separators without meaningful content between them
- Do not use a separator when whitespace alone provides sufficient visual grouping
- Do not use the label slot for long text — keep it to one or two words
- Do not 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
or
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';
export default function Example() {
return (
<>
<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: `
<arc-separator />
<arc-separator variant="dashed" />
<arc-separator variant="fade" />
<arc-separator label="or" />
`,
})
export class ContentSection {}import { Separator } from '@arclux/arc-ui-solid';
export default function Example() {
return (
<>
<Separator />
<Separator variant="dashed" />
<Separator variant="fade" />
<Separator label="or" />
</>
);
}import { Separator } from '@arclux/arc-ui-preact';
export default function Example() {
return (
<>
<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
-
orientation'horizontal' | 'vertical''horizontal' - Controls the divider direction. Vertical separators display as inline-flex with full parent height.
-
labelstring'' - 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.