General

Separator

Copy page

View as Markdown

Open in ChatGPT

Open in Claude

Visually or semantically separates content.

Usage#

app.component.ts

import { WdsSeparatorComponent } from '@wds/angular/separator';

Set the spacing around the separator with classes on it (e.g. my-4). Menus, fields and other components have their own separators (wds-dropdown-separator, wds-field-separator…); use wds-separator everywhere else.

Examples#

Default#

A horizontal separator spans the width of its container. orientation="vertical" stretches to the height of a flex row (here h-5).

WDS Components

Web components for enterprise apps.

Blog

Docs

Source

Show code

separator-default.ts

import { Component } from '@angular/core';
import { WdsSeparatorComponent } from '@wds/angular/separator';

@Component({
  selector: 'app-separator-default-demo',
  imports: [WdsSeparatorComponent],
  template: `
    <div class="flex w-full max-w-sm flex-col">
      <div class="space-y-1">
        <div class="text-sm font-medium leading-none">WDS Components</div>
        <div class="text-sm text-muted-foreground">Web components for enterprise apps.</div>
      </div>
      <wds-separator class="my-4"></wds-separator>
      <div class="flex h-5 items-center gap-4 text-sm">
        <span>Blog</span>
        <wds-separator orientation="vertical"></wds-separator>
        <span>Docs</span>
        <wds-separator orientation="vertical"></wds-separator>
        <span>Source</span>
      </div>
    </div>
  `,
})
export class SeparatorDefaultDemo {}

Decorative#

Between links that are already separate items, the line is only decoration: decorative hides it from screen readers.

Show code

separator-decorative.ts

import { Component } from '@angular/core';
import { WdsSeparatorComponent } from '@wds/angular/separator';

@Component({
  selector: 'app-separator-decorative-demo',
  imports: [WdsSeparatorComponent],
  template: `
    <footer class="flex h-5 items-center gap-3 text-sm text-muted-foreground">
      <a href="#" class="text-muted-foreground no-underline hover:text-foreground hover:underline">Privacy</a>
      <wds-separator orientation="vertical" decorative></wds-separator>
      <a href="#" class="text-muted-foreground no-underline hover:text-foreground hover:underline">Terms</a>
      <wds-separator orientation="vertical" decorative></wds-separator>
      <a href="#" class="text-muted-foreground no-underline hover:text-foreground hover:underline">Cookies</a>
    </footer>
  `,
})
export class SeparatorDecorativeDemo {}

With label#

Text in the slot sits in the middle of a horizontal line.

Continue with GitHub

Or continue with

Show code

separator-label.ts

import { Component } from '@angular/core';
import { WdsButtonComponent } from '@wds/angular/button';
import { WdsSeparatorComponent } from '@wds/angular/separator';
import { WdsInputComponent } from '@wds/angular/input';

@Component({
  selector: 'app-separator-label-demo',
  imports: [WdsButtonComponent, WdsSeparatorComponent, WdsInputComponent],
  template: `
    <div class="flex w-full max-w-sm flex-col gap-4">
      <wds-button variant="outline">Continue with GitHub</wds-button>
      <wds-separator>Or continue with</wds-separator>
      <wds-input type="email" aria-label="Email" placeholder="[email protected]"></wds-input>
      <wds-button>Sign in with email</wds-button>
    </div>
  `,
})
export class SeparatorLabelDemo {}

With icon#

An <svg> (14px) or a wds-icon before the text of the label.

Today

Milestone 2

Show code

separator-icon.ts

import { Component } from '@angular/core';
import { WdsSeparatorComponent } from '@wds/angular/separator';
import { WdsIconComponent } from '@wds/angular/icon';

@Component({
  selector: 'app-separator-icon-demo',
  imports: [WdsSeparatorComponent, WdsIconComponent],
  template: `
    <div class="flex w-full max-w-sm flex-col gap-6">
      <wds-separator>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M16 2v4" /><path d="M8 2v4" /><path d="M3 10h18" /></svg>
        Today
      </wds-separator>
      <wds-separator>
        <wds-icon name="flag-outline" size="xs"></wds-icon>
        Milestone 2
      </wds-separator>
    </div>
  `,
})
export class SeparatorIconDemo {}

List#

Separators between rows of a list in a bordered box.

Two-factor authentication

Trusted devices 3

Show code

separator-list.ts

import { Component } from '@angular/core';
import { WdsBadgeComponent } from '@wds/angular/badge';
import { WdsSeparatorComponent } from '@wds/angular/separator';

@Component({
  selector: 'app-separator-list-demo',
  imports: [WdsBadgeComponent, WdsSeparatorComponent],
  template: `
    <div class="flex w-full max-w-sm flex-col rounded-lg border border-border">
      <div class="flex items-center justify-between p-3 text-sm">
        <span>Two-factor authentication</span>
        <wds-badge variant="secondary">On</wds-badge>
      </div>
      <wds-separator decorative></wds-separator>
      <div class="flex items-center justify-between p-3 text-sm">
        <span>Login alerts</span>
        <wds-badge variant="secondary">On</wds-badge>
      </div>
      <wds-separator decorative></wds-separator>
      <div class="flex items-center justify-between p-3 text-sm">
        <span>Trusted devices</span>
        <span class="text-muted-foreground">3</span>
      </div>
    </div>
  `,
})
export class SeparatorListDemo {}

Order summary#

A separator sets the total apart from the lines above it.

Subtotal $316.00

Shipping $12.00

Tax $25.28

Total $353.28

Show code

separator-order-summary.ts

import { Component } from '@angular/core';
import { WdsSeparatorComponent } from '@wds/angular/separator';

@Component({
  selector: 'app-separator-order-summary-demo',
  imports: [WdsSeparatorComponent],
  template: `
    <div class="flex w-full max-w-xs flex-col gap-3 text-sm">
      <div class="flex justify-between">
        <span class="text-muted-foreground">Subtotal</span>
        <span class="tabular-nums">$316.00</span>
      </div>
      <div class="flex justify-between">
        <span class="text-muted-foreground">Shipping</span>
        <span class="tabular-nums">$12.00</span>
      </div>
      <div class="flex justify-between">
        <span class="text-muted-foreground">Tax</span>
        <span class="tabular-nums">$25.28</span>
      </div>
      <wds-separator></wds-separator>
      <div class="flex justify-between font-medium">
        <span>Total</span>
        <span class="tabular-nums">$353.28</span>
      </div>
    </div>
  `,
})
export class SeparatorOrderSummaryDemo {}

Color and size#

--wds-separator-color sets the color of the line and --wds-separator-size its thickness. The label takes the text color of the separator.

Today

Show code

separator-custom.ts

import { Component } from '@angular/core';
import { WdsSeparatorComponent } from '@wds/angular/separator';

@Component({
  selector: 'app-separator-custom-demo',
  imports: [WdsSeparatorComponent],
  template: `
    <div class="flex w-full max-w-sm flex-col gap-6 text-sm">
      <wds-separator class="[--wds-separator-color:var(--wds-primary)] [--wds-separator-size:2px]"></wds-separator>
      <wds-separator class="text-primary [--wds-separator-color:var(--wds-primary)]">Today</wds-separator>
    </div>
  `,
})
export class SeparatorCustomDemo {}

API References#

wds-separator#

A line that separates content: sections of a page, items in a list or a toolbar. Horizontal by default; a vertical one stretches to the height of its row in a flex container. Text in the slot sits in the middle of a horizontal line (e.g. "or", "Continue with"). The separator is role="separator". When it only decorates (e.g. between links in a footer) set decorative, so screen readers skip it.

Attributes

Attribute	Type	Default	Description
orientation	WdsSeparatorOrientation	'horizontal'	Direction of the line.
decorative	boolean	false	Purely visual: hidden from screen readers (`role="none"`).

Slots

Slot	Description
(default)	Text in the middle of a horizontal line, optionally with an `<svg>` icon (14px) or `wds-icon`.

CSS parts (::part)

Part	Description
base	The line (with the text).
label	The text.

CSS custom properties

Property	Description
--wds-separator-color	Color of the line (default `--wds-border`).
--wds-separator-size	Thickness of the line (default 1px).

Accessibility#

The separator has role="separator", and a vertical one also aria-orientation="vertical". Screen readers announce it between sections.

decorative sets role="none": use it when the line only decorates, e.g. between links or between rows that are already separate items.

The text of a labeled separator is read as plain text.

Keyboard support#

The separator is not focusable and has no keyboard interaction.

Usage#

Examples#

Default#

Decorative#

With label#

With icon#

List#

Order summary#

Color and size#

API References#

wds-separator#

Attributes

Slots

CSS parts (::part)

CSS custom properties

Accessibility#

Screen reader#

Keyboard support#