Divider

Dividers visually separate or group adjacent elements with a horizontal or vertical line. Use them to establish rhythm and hierarchy within menus, toolbars, and layouts.

<wa-divider></wa-divider>

<wa-divider>or</wa-divider>

Examples

Width

Use the --width custom property to change the width of the divider.

<wa-divider style="--width: 4px;"></wa-divider>

Color

Use the --color custom property to change the color of the divider.

<wa-divider style="--color: var(--wa-color-brand-fill-loud);"></wa-divider>

Spacing

Use the --spacing custom property to change the amount of space between the divider and its neighboring elements.

<div class="wa-text-center">
  Above
  <wa-divider style="--spacing: 2rem;"></wa-divider>
  Below
</div>

Orientation

The default orientation for dividers is horizontal. Set the orientation attribute to vertical to draw a vertical divider. The divider will span the full height of its Flexbox or CSS Grid container.

<div style="display: flex; align-items: center;">
  First
  <wa-divider orientation="vertical"></wa-divider>
  Middle
  <wa-divider orientation="vertical"></wa-divider>
  Last
</div>

Label

Slot in text to show a label in the center of the divider. Labels separate alternatives, such as two ways to sign in.

<div class="wa-stack" style="max-width: 20rem;">
  <wa-button appearance="filled" variant="brand">
    <wa-icon slot="start" name="envelope"></wa-icon>
    Sign In with Email
  </wa-button>
  <wa-divider>or</wa-divider>
  <wa-button appearance="outlined">
    <wa-icon slot="start" name="key"></wa-icon>
    Use a Passkey
  </wa-button>
</div>

Vertical dividers center the label, too.

<div class="wa-cluster wa-flex-nowrap">
  <wa-card class="wa-text-center">
    <strong>Tabs</strong><br />
    One keystroke
  </wa-card>
  <wa-divider orientation="vertical">vs</wa-divider>
  <wa-card class="wa-text-center">
    <strong>Spaces</strong><br />
    Same everywhere
  </wa-card>
</div>

Label Placement

Use the label-placement attribute to move the label toward either end of the divider.

The --label-offset custom property adds a line between the divider's edge and a start or end label. It's 0 by default, so the label sits --label-spacing from the edge.

<wa-divider label-placement="start">Start</wa-divider>
<wa-divider label-placement="center">Center</wa-divider>
<wa-divider label-placement="end">End</wa-divider>
<wa-divider label-placement="start" style="--label-offset: 4rem;">Start, offset 4rem</wa-divider>

Label Spacing

Use the --label-spacing custom property to change the amount of space between the label and the divider's lines.

<wa-divider>Default</wa-divider>
<wa-divider style="--label-spacing: var(--wa-space-xl);">Custom --label-spacing (xl)</wa-divider>

Decorative Labels

Slot in icons for a quiet break between sections, or place one at the start or end to open or close a passage. Size and space them by targeting the label part, and tint the line and the icon separately with the --color custom property and the part's color. Decorative labels don't need an accessible name.

<div class="wa-stack">
  <wa-divider class="divider-flourish">
    <wa-icon family="brands" name="web-awesome"></wa-icon>
  </wa-divider>

  <wa-divider class="divider-flourish divider-nature">
    <wa-icon name="seedling" variant="solid"></wa-icon>
    <wa-icon name="leaf" variant="solid"></wa-icon>
    <wa-icon name="tree" variant="solid"></wa-icon>
  </wa-divider>

  <wa-divider class="divider-flourish" label-placement="start">
    <wa-icon name="quote-left" variant="solid"></wa-icon>
  </wa-divider>

  <wa-divider class="divider-flourish" label-placement="end">
    <wa-icon name="quote-right" variant="solid"></wa-icon>
  </wa-divider>
</div>

<style>
  .divider-flourish::part(label) {
    gap: var(--wa-space-xs);
  }

  .divider-nature {
    --color: var(--wa-color-success-border-quiet);
  }

  .divider-nature::part(label) {
    color: var(--wa-color-success-on-quiet);
  }
</style>

Dropdown Dividers

Use dividers in dropdowns to visually group dropdown items. To name a group, use a heading instead of a labeled divider, so the name is exposed to assistive technology.

<wa-dropdown style="max-width: 200px;">
  <wa-button appearance="filled" slot="trigger" with-caret>Menu</wa-button>
  <wa-dropdown-item value="1">Option 1</wa-dropdown-item>
  <wa-dropdown-item value="2">Option 2</wa-dropdown-item>
  <wa-dropdown-item value="3">Option 3</wa-dropdown-item>
  <wa-divider></wa-divider>
  <wa-dropdown-item value="4">Option 4</wa-dropdown-item>
  <wa-dropdown-item value="5">Option 5</wa-dropdown-item>
  <wa-dropdown-item value="6">Option 6</wa-dropdown-item>
</wa-dropdown>

Accessibility Considerations

Dividers have the separator role, which hides their contents from assistive technology. When you slot in text, the divider takes it as its accessible name, so a screen reader announces "or" rather than skipping the label. An aria-label attribute on the divider overrides the slotted text.

An icon-only label has no text to borrow. If the icon carries meaning, give the divider an aria-label. Setting label on the icon has no effect here because the separator hides it. Decorative labels, such as a row of stars, need nothing extra.

Because the separator hides its contents, never place a button, link, or other interactive control in a label. Keyboard users can still focus it, but screen readers won't announce it. Put the control before or after the divider instead.

API

Importing

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.

import 'https://ka-f.webawesome.com/webawesome@0.20.0/components/divider/divider.js';

import '@awesome.me/webawesome/dist/components/divider/divider.js';

import './webawesome/dist/components/divider/divider.js';

import WaDivider from '@awesome.me/webawesome/dist/react/divider/index.js';

Slots

Learn more about using slots.

Attributes & Properties

Learn more about attributes and properties.

CSS Custom Properties

Learn more about CSS custom properties.

CSS Parts

Learn more about CSS parts.

SSR

Learn more about Server-Side Rendering (SSR).

If you slot in a label, set the with-label attribute, otherwise the label won't be centered in the divider until the component hydrates on the client. This works around the lack of a :has-slotted CSS pseudo-class.