Labelled divider

How to use it

Use to separate two alternative ways of doing the same thing, such as signing in with a link or with a password, or uploading a file versus pasting a URL. Do not use it as a general section break (use an <hr> or headings). Change both the visible label and aria-label together, and replace the demo buttons with your real options.

Accessibility

The divider is a <div role="separator"> with aria-label="or": a separator's children are presentational, so the label is given as its accessible name and screen readers announce "or, separator" between the two options. The two horizontal lines are empty decorative spans. The label is #475569 on #ffffff (7.58:1), and the surrounding buttons are #0f172a on #ffffff (17.85:1) with a 2px focus outline.

Source (copy-ready)

Copy code

<div class="dcl-labelled-divider">
  <button type="button" class="dcl-labelled-divider__option">Email me a sign-in link</button>
  <div class="dcl-labelled-divider__rule" role="separator" aria-label="or">
    <span class="dcl-labelled-divider__line" aria-hidden="true"></span>
    <span class="dcl-labelled-divider__label">or</span>
    <span class="dcl-labelled-divider__line" aria-hidden="true"></span>
  </div>
  <button type="button" class="dcl-labelled-divider__option">Sign in with a password</button>
</div>
<style>
.dcl-labelled-divider { display: flex; flex-direction: column; gap: 0.75rem; max-width: 22rem; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-labelled-divider__option { min-height: 2.75rem; padding: 0.5rem 1rem; border: 1px solid #94a3b8; border-radius: 0.375rem; font: inherit; cursor: pointer; color: #0f172a; background-color: #ffffff; }
.dcl-labelled-divider__option:hover { color: #0f172a; background-color: #f1f5f9; }
.dcl-labelled-divider__option:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dcl-labelled-divider__rule { display: flex; align-items: center; gap: 0.75rem; }
.dcl-labelled-divider__line { flex: 1 1 auto; min-width: 1rem; border-top: 1px solid #94a3b8; }
.dcl-labelled-divider__label { flex: none; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: #475569; background-color: #ffffff; }
</style>