• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Divider

Component status
Contribution
Last releasedOctober 20, 2020
Current version@spectrum-css/divider@1.0.0-beta.2

Variants


Large
Verified

Large


Page or Section Titles.

Show markup
<h2 class="spectrum-Heading spectrum-Heading--sizeM">Large</h2>
<hr class="spectrum-Divider spectrum-Divider--large">
<p class="spectrum-Body">Page or Section Titles.</p>

Medium
Verified

Medium


Divide subsections, or divide different groups of elements (between panels, rails, etc.)

Show markup
<h2 class="spectrum-Heading spectrum-Heading--sizeS">Medium</h2>
<hr class="spectrum-Divider spectrum-Divider--medium">
<p class="spectrum-Body">Divide subsections, or divide different groups of elements (between panels, rails, etc.)</p>

Small
Verified

Small


Divide like-elements (tables, tool groups, elements within a panel, etc.)

Show markup
<h2 class="spectrum-Heading spectrum-Heading--sizeXS">Small</h2>
<hr class="spectrum-Divider spectrum-Divider--small">
<p class="spectrum-Body">Divide like-elements (tables, tool groups, elements within a panel, etc.)</p>

Vertical, Small
Verified

When a vertical Divider is used inside of a flex container, use align-self: stretch; height: auto on the Divider.
ButtonGroup automatically applies these styles to vertical Dividers.

Show markup
<div class="spectrum-ButtonGroup">
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Properties">
      <use xlink:href="#spectrum-icon-18-Properties" />
    </svg>
  </button>
  <div class="spectrum-Divider spectrum-Divider--small spectrum-Divider--vertical" style="height: auto; align-self: stretch;"></div>
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Select">
      <use xlink:href="#spectrum-icon-18-Select" />
    </svg>
  </button>
</div>

Vertical, Medium
Verified

Show markup
<div class="spectrum-ButtonGroup">
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Properties">
      <use xlink:href="#spectrum-icon-18-Properties" />
    </svg>
  </button>
  <div class="spectrum-Divider spectrum-Divider--medium spectrum-Divider--vertical" style="height: auto; align-self: stretch;"></div>
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Select">
      <use xlink:href="#spectrum-icon-18-Select" />
    </svg>
  </button>
</div>

Migrating from Rule


Component rename

Rule is now named Divider. All instances of .spectrum-Rule in your code should be replaced with .spectrum-Divider, and the @spectrum-css/divider package should be used instead of @spectrum-css/rule.

Change workflow icon size to medium

Please replace .spectrum-Icon--sizeS with .spectrum-Icon--sizeM.