v0.9.4defuss-shadcn
Theme

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