v0.9.9defuss-shadcn
Theme
Design your own

defuss-shadcn / Website / Account & States / social-login

Built with: CSS

Social LoginBLK

Provides authentication through external identity providers - Google, Apple, GitHub, Microsoft - as full-width buttons, an icon row, with a divider to the email form. Part of the Account & States blocks.

On this page (3)
Component Skill — components/social-login/component-skill.md

Native basis

A group of outline Buttons (<a href> to your OAuth start URLs), each with the provider's mark and "Continue with ..."; the icon variant keeps the text as aria-label. .mk-social-login-divider separates them from the email form.

Built from

Button.

Web Platform APIs

Container queries

Classes

.mk-social-login.mk-social-login-divider

Data attributes

data-variant="icons"; .mk-social-login-divider.

§Default

Full-width outline Buttons - links to your OAuth start URLs - each with the provider mark and "Continue with …".

§Icons with divider

data-variant='icons': square buttons on one row, each named by aria-label; .mk-social-login-divider puts "or" between them and the email form.

§CSS view file

/* -- Social Login (website · Account & States) ----------------------------
   Provides authentication through external identity providers - Google, Apple, GitHub, Microsoft - as full-width buttons, an icon row, with a divider to the email form. */
@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-social-login, .mk-social-login *, .mk-social-login ::before, .mk-social-login ::after) {
    box-sizing: border-box;
  }
  .mk-social-login {
    display: grid;
    gap: 0.625rem;
    width: 100%;
    max-width: 24rem;
    & .btn {
      justify-content: center;
      gap: 0.625rem;
      width: 100%;
    }
    & svg {
      flex: none;
    }
  }
  .mk-social-login[data-variant="icons"] {
    grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
    & .btn {
      padding-inline: 0;
    }
  }
  .mk-social-login-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 24rem;
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    &::before,
    &::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--border);
    }
  }
  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-social-login-divider::before,
    .mk-social-login-divider::after {
      background: CanvasText;
    }
  }
}

Comments, ideas or improvements? Edit this page's source on GitHub