Alternative sign-in buttons

How to use it

Use above or below a password form to offer other ways to sign in, such as a passkey or a work account. Keep the labels generic or use your identity provider's approved button instead; do not imitate another company's logo here. The click handler only shows a demo message: the developer must start the real passkey or single sign-on flow for each button, and point the email link at the real sign-in form.

Accessibility

Each option is a native <button type="button"> whose visible text says the whole action (Continue with passkey), so no aria-label is needed; the icons are inline SVG with aria-hidden="true". The "or" divider is plain text between two drawn rules, and the fallback is a real link; everything is in Tab order with a 2px blue focus-visible outline, and the demo result is written to a role="status" region. Button text #0f172a on white (#f1f5f9 while hovered) is 17.85:1 (16.30:1), the divider #475569 on white 7.58:1, and the link #1d4ed8 on white 6.70:1.

Source (copy-ready)

Copy code

<div class="dcl-social">
  <h2 class="dcl-social__title">Sign in to your workspace</h2>
  <div class="dcl-social__buttons">
    <button type="button" class="dcl-social__button" data-method="passkey">
      <svg class="dcl-social__icon" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><circle cx="8" cy="8" r="4" fill="none" stroke="#0f172a" stroke-width="2"/><path d="M11 11l9 9m-4-4l2-2m-4 0l2-2" fill="none" stroke="#0f172a" stroke-width="2" stroke-linecap="round"/></svg>
      <span class="dcl-social__label">Continue with passkey</span>
    </button>
    <button type="button" class="dcl-social__button" data-method="work account">
      <svg class="dcl-social__icon" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><rect x="4" y="3" width="16" height="18" rx="1" fill="none" stroke="#0f172a" stroke-width="2"/><path d="M8 7h2m4 0h2M8 11h2m4 0h2M10 21v-4h4v4" fill="none" stroke="#0f172a" stroke-width="2"/></svg>
      <span class="dcl-social__label">Continue with work account</span>
    </button>
    <button type="button" class="dcl-social__button" data-method="email link">
      <svg class="dcl-social__icon" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="#0f172a" stroke-width="2"/><path d="M3 7l9 6 9-6" fill="none" stroke="#0f172a" stroke-width="2"/></svg>
      <span class="dcl-social__label">Continue with a sign-in link</span>
    </button>
  </div>
  <p class="dcl-social__divider"><span class="dcl-social__or">or</span></p>
  <a href="../index.html" class="dcl-social__link">Sign in with email and password</a>
  <p class="dcl-social__status" role="status"></p>
</div>
<style>
.dcl-social { display: flex; flex-direction: column; gap: 1rem; max-width: 22rem; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-social__title { margin: 0; font-size: 1.25rem; color: #0f172a; background-color: #ffffff; }
.dcl-social__buttons { display: flex; flex-direction: column; gap: 0.6rem; }
.dcl-social__button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.65rem 1rem; border: 1px solid #94a3b8; border-radius: 6px; font: inherit; font-weight: 600; text-align: left; cursor: pointer; color: #0f172a; background-color: #ffffff; }
.dcl-social__button:hover { color: #0f172a; background-color: #f1f5f9; }
.dcl-social__button:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dcl-social__icon { flex: none; }
.dcl-social__label { min-width: 0; }
.dcl-social__divider { display: flex; align-items: center; gap: 0.75rem; margin: 0; font-size: 0.875rem; color: #475569; background-color: #ffffff; }
.dcl-social__divider::before, .dcl-social__divider::after { content: ""; flex: 1; border-top: 1px solid #cbd5e1; }
.dcl-social__or { color: #475569; background-color: #ffffff; }
.dcl-social__link { align-self: center; color: #1d4ed8; background-color: #ffffff; }
.dcl-social__link:hover { color: #1e40af; background-color: #ffffff; }
.dcl-social__link:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dcl-social__status { margin: 0; font-size: 0.9rem; color: #334155; background-color: #ffffff; }
</style>
<script>
(function () {
  document.querySelectorAll(".dcl-social").forEach(function (root) {
    if (root.dataset.dclBound) {
      return;
    }
    root.dataset.dclBound = "true";
    var status = root.querySelector(".dcl-social__status");
    root.querySelectorAll(".dcl-social__button").forEach(function (button) {
      button.addEventListener("click", function () {
        if (status) {
          status.textContent = "Demo only: connect this button to your " + (button.getAttribute("data-method") || "sign-in") + " flow.";
        }
      });
    });
  });
})();
</script>