Login button component

Source: en/integrations/buttons.md · Live: https://docs.1pass.dev/en/integrations/buttons LLM-sanitized: internal links absolutized, VitePress containers → admonitions, line numbers in the Jump-to Index reference this rendered file (1-indexed).

📍 Jump-to Index

• L36-L57: ## Shared CSS
• L58-L79: ## 1x1 — icon only (44×44)
• L80-L101: ## 2x1 — inline (220×44)
• L102-L119: ## 4x1 — Hero (full-width × 56)
• L120-L146: ## Design token override examples
• L147-L176: ## Framework inline (for reference)
  • L149-L162: ### React / JSX
  • L163-L172: ### Svelte
  • L173-L176: ### Flutter (logi_button.dart)
• L177-L186: ## Brand guide
• L187-L192: ## Next (planned)

---

Login button component

💡 Tip: RP start route path The examples below all use /auth/logi/start as a placeholder. The actual path is up to the RP (for example, /auth/login, /sign-in, /api/auth/start). Replace it with your RP's own OAuth start route.

Standard size × theme combinations for the logi SSO button. Vanilla HTML + CSS variables — copy-paste it into any stack (React/Vue/Svelte/Flutter). Override the colors with tokens, and it works as-is.

💡 Tip: Why we provide vanilla only Per-framework NPM packages are planned for Phase 2, after we have adoption data. Until then, vanilla works in every stack, and when the design changes the RP can swap a single token line, which is the most flexible.

The QR login option is already integrated into logi's /oauth/authorize page, so no separate QR button is needed (see QR login).

Shared CSS

Drop this in once and all the sizes below work.

Brand icon:

🔴 canonical: use ~/toy/logi/server/public/icon.svg as-is. Shared across every surface (web / iOS / Android / Flutter). The old three-concentric-circle SVG (<circle r="9">+r="4.5"+r="1.4">) pattern is deprecated (2026-05-19) — its weak brand recognition meant users did not recognize it as logi across RPs, causing confusion. Do not use concentric circles at any size.

<img class="logi-btn__logo" src="/icon.svg" alt="" aria-hidden="true" />

# Copy once during RP integration (to wherever paths.assets is hosted)
cp logi/server/public/icon.svg <your_rp>/public/logi-icon.svg

1x1 — icon only (44×44)

Tight spaces like a sidebar / FAB / mobile header / action bar — logo only, no text.

<a href="/auth/logi/start" class="logi-btn logi-btn--1x1" aria-label="Sign in with logi">
  <img class="logi-btn__logo" src="/icon.svg" alt="" aria-hidden="true" />
</a>

⚠️ Warning: Accessibility The 1x1 button has no text, so aria-label="Sign in with logi" is required. If a screen reader cannot convey its meaning, it violates WCAG 2.1 4.1.2.

2x1 — inline (220×44)

Bottom of a login form / modal footer / "other ways to sign in" option group.

Sign in with logi Sign in with logi

<a href="/auth/logi/start" class="logi-btn logi-btn--2x1">
  <img class="logi-btn__logo" src="/icon.svg" alt="" aria-hidden="true" />
  Sign in with logi
</a>

4x1 — Hero (full-width × 56)

The primary CTA on the main login page. Takes up an entire row.

Sign in with logi

<a href="/auth/logi/start" class="logi-btn logi-btn--4x1">
  <img class="logi-btn__logo" src="/icon.svg" alt="" aria-hidden="true" />
  Sign in with logi
</a>

Design token override examples

To match your RP's design system:

/* Tailwind project */
:root {
  --logi-button-bg:     theme('colors.indigo.600');
  --logi-button-fg:     theme('colors.white');
  --logi-button-radius: theme('borderRadius.md');
}

/* shadcn/ui */
:root {
  --logi-button-bg:     hsl(var(--primary));
  --logi-button-fg:     hsl(var(--primary-foreground));
  --logi-button-radius: var(--radius);
}

/* Bootstrap */
:root {
  --logi-button-bg:     var(--bs-primary);
  --logi-button-fg:     #fff;
  --logi-button-radius: var(--bs-border-radius);
}

Framework inline (for reference)

React / JSX

function LogiButton({ size = "2x1", theme = "dark", href = "/auth/logi/start" }) {
  return (
    <a href={href} className={`logi-btn logi-btn--${size} ${theme === "light" ? "logi-btn--light" : ""}`}
       aria-label="Sign in with logi">
      <img className="logi-btn__logo" src="/icon.svg" alt="" aria-hidden="true" />
      {size !== "1x1" && "Sign in with logi"}
    </a>
  );
}

Svelte

<a {href} class="logi-btn logi-btn--{size} {theme === 'light' ? 'logi-btn--light' : ''}"
   aria-label="Sign in with logi">
  <img class="logi-btn__logo" src="/icon.svg" alt="" aria-hidden="true" />
  {#if size !== "1x1"}Sign in with logi{/if}
</a>

Flutter (logi_button.dart)

Planned to be split out into a dedicated SDK package. In the meantime, build the size matrix above yourself with flutter_web_auth_2 + IconButton/ElevatedButton. Use Theme.of(context).colorScheme.primary for the color.

Brand guide

Item	Rule
Text	Korean: "logi 로 로그인" / English: "Sign in with logi" / Japanese: "logi でログイン"
Logo	/icon.svg (gradient dot) — use as-is. Do not transform, rotate, decompose colors, or use a concentric-circle substitute ❌
Minimum size	32×32px (smaller and the logo is hard to identify)
Clear space	Keep an empty margin around the button equal to half the logo's width
Color contrast	WCAG AA 4.5:1 or higher (using the light/dark tokens as-is satisfies this)

Next (planned)

• NPM packages @logi-auth/button-react / @logi-auth/button-vue / @logi-auth/button-svelte — Phase 2, after adoption data
• CDN CSS https://api.1pass.dev/buttons.css — one-line integration via <link rel="stylesheet">
• Figma library — for designer collaboration