sp-divider

NPM 1.7.0

View Storybook

Try it on Stackblitz
Overview API Changelog

Overview

sp-divider brings clarity to a layout by grouping and dividing content that exists in close proximity. It can also be used to establish rhythm and hierarchy.

View the design documentation for this component.

Usage

See it on NPM! How big is this package in your project? Try it on Stackblitz

yarn add @spectrum-web-components/divider

Import the side effectful registration of <sp-divider> via:

import '@spectrum-web-components/divider/sp-divider.js';

When looking to leverage the Divider base class as a type and/or for extension purposes, do so via:

import { Divider } from '@spectrum-web-components/divider';

Options

Horizontal dividers are used to separate content stacked vertically.

Small 
<h2 class="spectrum-Heading spectrum-Heading--sizeXS">Small</h2>
<sp-divider size="s"></sp-divider>
<p class="spectrum-Body">
    The small divider is used to divide similar components such as table rows,
    action button groups, and components within a panel.
</p>
 Medium 
<h2 class="spectrum-Heading spectrum-Heading--sizeS">Medium</h2>
<sp-divider size="m"></sp-divider>
<p class="spectrum-Body">
    The medium divider is used to divide subsections on a page, or to separate
    different groups of components such as panels, rails, etc.
</p>
 Large 
<h2 class="spectrum-Heading spectrum-Heading--sizeM">Large</h2>
<sp-divider size="l"></sp-divider>
<p class="spectrum-Body">
    The large divider should be used only for page titles or section titles.
</p>

Vertical

Vertical dividers are used to separate content horizontally.

When a vertical divider is used inside of a flex container, use align-self: stretch; height: auto; on the divider.

Small 
<div style="height: 32px; display: flex;">
    <sp-action-button quiet label="Zoom in">
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
    </sp-action-button>
    <sp-divider
        size="s"
        style="align-self: stretch; height: auto;"
        vertical
    ></sp-divider>
    <sp-action-button quiet label="Zoom in">
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
    </sp-action-button>
</div>
 Medium 
<div style="height: 32px; display: flex;">
    <sp-action-button quiet label="Zoom in">
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
    </sp-action-button>
    <sp-divider
        size="m"
        style="align-self: stretch; height: auto;"
        vertical
    ></sp-divider>
    <sp-action-button quiet label="Zoom in">
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
    </sp-action-button>
</div>
 Large 
<div style="height: 32px; display: flex;">
    <sp-action-button quiet label="Zoom in">
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
    </sp-action-button>
    <sp-divider
        size="l"
        style="align-self: stretch; height: auto;"
        vertical
    ></sp-divider>
    <sp-action-button quiet label="Zoom in">
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
    </sp-action-button>
</div>

Static color

Use the static color option when a divider needs to be placed on top of a color background or visual. Static color dividers are available in black or white regardless of color theme.

Static black 
<div
    style="background-color: var(--spectrum-docs-static-black-background-color); color: var(--spectrum-black); padding: 20px"
>
    <h2 class="spectrum-Heading spectrum-Heading--sizeS">
        Static black on light background
    </h2>
    <sp-divider static-color="black" size="m"></sp-divider>
    <p class="spectrum-Body">
        Use static black on light color or image backgrounds.
    </p>
</div>
 Static white 
<div
    style="background-color: var(--spectrum-docs-static-white-background-color); color: var(--spectrum-white); padding: 20px;"
>
    <h2 class="spectrum-Heading spectrum-Heading--sizeS">
        Static white on dark background
    </h2>
    <sp-divider static-color="white" size="m"></sp-divider>
    <p class="spectrum-Body">
        Use static white on dark color or image backgrounds.
    </p>
</div>

Accessibility

The <sp-divider> element implements the following accessibility features:

  • ARIA role: Automatically sets role="separator" to ensure proper semantic meaning for assistive technologies
  • Orientation support: When vertical is true, automatically sets aria-orientation="vertical" to indicate the divider's orientation

Best practices

  • Medium or large dividers can be used with header text to visually create a section or page title. Place the divider below the header for best results.
  • Ensure sufficient color contrast when using static-color variants on colored backgrounds.
  • Use dividers to create meaningful visual separation, not just decorative lines.
  • Use dividers sparingly; excessive use can diminish their visual impact.

Attributes and Properties

Property Attribute Type Default Description staticColor static-color 'white' | 'black' | undefined The static color variant to use for the divider. vertical vertical boolean false Whether the divider is vertical. If false, the divider is horizontal. The default is false.

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.7.0

1.6.0

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.6.0

1.5.0

Patch Changes

  • #5271 165a904 Thanks @renovate! - Remove unnecessary system theme references to reduce complexity for components that don't need the additional mapping layer.

  • Updated dependencies []:

    • @spectrum-web-components/base@1.5.0

1.4.0

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.4.0

1.3.0

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.3.0

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.2.0 (2025-02-27)

Note: Version bump only for package @spectrum-web-components/divider

1.1.2 (2025-02-12)

Note: Version bump only for package @spectrum-web-components/divider

1.1.1 (2025-01-29)

Note: Version bump only for package @spectrum-web-components/divider

1.1.0 (2025-01-29)

Bug Fixes

  • lock prerelease versions for Spectrum CSS (#5014) (8aa7734)

1.0.1 (2024-11-11)

Note: Version bump only for package @spectrum-web-components/divider

1.0.0 (2024-10-31)

Note: Version bump only for package @spectrum-web-components/divider

0.49.0 (2024-10-15)

Features

  • add static-color to replace static (#4808) (43cf086)

0.48.1 (2024-10-01)

Note: Version bump only for package @spectrum-web-components/divider

0.48.0 (2024-09-17)

Note: Version bump only for package @spectrum-web-components/divider

0.47.2 (2024-09-03)

Note: Version bump only for package @spectrum-web-components/divider

0.47.1 (2024-08-27)

Note: Version bump only for package @spectrum-web-components/divider

0.47.0 (2024-08-20)

Note: Version bump only for package @spectrum-web-components/divider

0.46.0 (2024-08-08)

Note: Version bump only for package @spectrum-web-components/divider

0.45.0 (2024-07-30)

Note: Version bump only for package @spectrum-web-components/divider

0.44.0 (2024-07-15)

Note: Version bump only for package @spectrum-web-components/divider

0.43.0 (2024-06-11)

Note: Version bump only for package @spectrum-web-components/divider

0.42.5 (2024-05-24)

Note: Version bump only for package @spectrum-web-components/divider

0.42.4 (2024-05-14)

Note: Version bump only for package @spectrum-web-components/divider

0.42.3 (2024-05-01)

Note: Version bump only for package @spectrum-web-components/divider

0.42.2 (2024-04-03)

Note: Version bump only for package @spectrum-web-components/divider

0.42.1 (2024-04-02)

Note: Version bump only for package @spectrum-web-components/divider

0.42.0 (2024-03-19)

Features

  • asset: use core tokens (99e76f4)

0.41.2 (2024-03-05)

Note: Version bump only for package @spectrum-web-components/divider

0.41.1 (2024-02-22)

Note: Version bump only for package @spectrum-web-components/divider

0.41.0 (2024-02-13)

Note: Version bump only for package @spectrum-web-components/divider

0.40.5 (2024-02-05)

Note: Version bump only for package @spectrum-web-components/divider

0.40.4 (2024-01-29)

Note: Version bump only for package @spectrum-web-components/divider

0.40.3 (2024-01-11)

Note: Version bump only for package @spectrum-web-components/divider

0.40.2 (2023-12-18)

Note: Version bump only for package @spectrum-web-components/divider

0.40.1 (2023-12-05)

Note: Version bump only for package @spectrum-web-components/divider

0.40.0 (2023-11-16)

Note: Version bump only for package @spectrum-web-components/divider

0.39.4 (2023-11-02)

Note: Version bump only for package @spectrum-web-components/divider

0.39.3 (2023-10-18)

Note: Version bump only for package @spectrum-web-components/divider

0.39.2 (2023-10-13)

Note: Version bump only for package @spectrum-web-components/divider

0.39.1 (2023-10-06)

Note: Version bump only for package @spectrum-web-components/divider

0.39.0 (2023-09-25)

Note: Version bump only for package @spectrum-web-components/divider

0.38.0 (2023-09-05)

Note: Version bump only for package @spectrum-web-components/divider

0.37.0 (2023-08-18)

Note: Version bump only for package @spectrum-web-components/divider

0.36.0 (2023-08-18)

Note: Version bump only for package @spectrum-web-components/divider

0.35.0 (2023-07-31)

Note: Version bump only for package @spectrum-web-components/divider

0.34.0 (2023-07-11)

Note: Version bump only for package @spectrum-web-components/divider

0.33.2 (2023-06-14)

Note: Version bump only for package @spectrum-web-components/divider

0.33.0 (2023-06-08)

Note: Version bump only for package @spectrum-web-components/divider

0.32.0 (2023-06-01)

Note: Version bump only for package @spectrum-web-components/divider

0.31.0 (2023-05-17)

Note: Version bump only for package @spectrum-web-components/divider

0.30.0 (2023-05-03)

Bug Fixes

  • divider: update a11y semantics (46e6a12)
  • expand sized functionality to support no default and returning to default values (acf3cfb)
  • update to latest spectrum-css packages (a5ca19f)

Features

  • adopt DNA@7 base Spectrum CSS (e08cafd)
  • divider: create sp-divider from sp-rule (ec26d81)
  • divider: use core tokens (e30c969)
  • include all Dev Mode files in side effects (f70817c)
  • shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
  • use latest exports specification (a7ecf4b)

0.6.9 (2023-04-24)

Note: Version bump only for package @spectrum-web-components/divider

0.6.8 (2023-04-05)

Note: Version bump only for package @spectrum-web-components/divider

0.6.7 (2023-03-22)

Note: Version bump only for package @spectrum-web-components/divider

0.6.6 (2023-02-08)

Note: Version bump only for package @spectrum-web-components/divider

0.6.5 (2023-01-23)

Note: Version bump only for package @spectrum-web-components/divider

0.6.4 (2023-01-09)

Note: Version bump only for package @spectrum-web-components/divider

0.6.3 (2022-12-08)

Note: Version bump only for package @spectrum-web-components/divider

0.6.2 (2022-11-21)

Note: Version bump only for package @spectrum-web-components/divider

0.6.1 (2022-11-14)

Note: Version bump only for package @spectrum-web-components/divider

0.6.0 (2022-10-28)

Features

  • divider: use core tokens (e30c969)

0.5.1 (2022-08-24)

Note: Version bump only for package @spectrum-web-components/divider

0.5.0 (2022-08-09)

Features

  • include all Dev Mode files in side effects (f70817c)

0.4.12 (2022-08-04)

Note: Version bump only for package @spectrum-web-components/divider

0.4.11 (2022-07-18)

Note: Version bump only for package @spectrum-web-components/divider

0.4.10 (2022-06-29)

Note: Version bump only for package @spectrum-web-components/divider

0.4.9 (2022-06-07)

Note: Version bump only for package @spectrum-web-components/divider

0.4.8 (2022-05-27)

Note: Version bump only for package @spectrum-web-components/divider

0.4.7 (2022-05-12)

Note: Version bump only for package @spectrum-web-components/divider

0.4.6 (2022-04-21)

Note: Version bump only for package @spectrum-web-components/divider

0.4.5 (2022-03-08)

Note: Version bump only for package @spectrum-web-components/divider

0.4.4 (2022-03-04)

Note: Version bump only for package @spectrum-web-components/divider

0.4.3 (2022-02-22)

Note: Version bump only for package @spectrum-web-components/divider

0.4.2 (2022-01-26)

Note: Version bump only for package @spectrum-web-components/divider

0.4.1 (2021-12-13)

Note: Version bump only for package @spectrum-web-components/divider

0.4.0 (2021-11-08)

Note: Version bump only for package @spectrum-web-components/divider

0.3.1 (2021-11-08)

Note: Version bump only for package @spectrum-web-components/divider

0.3.0 (2021-11-02)

Features

  • adopt DNA@7 base Spectrum CSS (e08cafd)

0.2.8 (2021-09-20)

Note: Version bump only for package @spectrum-web-components/divider

0.2.7 (2021-07-22)

Note: Version bump only for package @spectrum-web-components/divider

0.2.6 (2021-06-16)

Note: Version bump only for package @spectrum-web-components/divider

0.2.5 (2021-05-12)

Note: Version bump only for package @spectrum-web-components/divider

0.2.4 (2021-04-09)

Note: Version bump only for package @spectrum-web-components/divider

0.2.3 (2021-03-29)

Bug Fixes

  • divider: update a11y semantics (46e6a12)

0.2.2 (2021-03-22)

Note: Version bump only for package @spectrum-web-components/divider

0.2.1 (2021-03-05)

Note: Version bump only for package @spectrum-web-components/divider

0.2.0 (2021-03-04)

Features

  • use latest exports specification (a7ecf4b)

0.1.1 (2021-02-11)

Bug Fixes

  • expand sized functionality to support no default and returning to default values (acf3cfb)
  • update to latest spectrum-css packages (a5ca19f)

0.1.0 (2021-02-02)

Features

  • divider: create sp-divider from sp-rule (ec26d81)