Login button component
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.
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.
<style>
:root {
/* RP: override these to match your design system */
--logi-button-bg: #0F172A; /* dark theme bg */
--logi-button-fg: #F8FAFC; /* dark theme text */
--logi-button-bg-light: #FFFFFF;
--logi-button-fg-light: #0F172A;
--logi-button-border: rgba(15, 23, 42, 0.12);
--logi-button-radius: 0; /* Dcode design guide: border-radius 0 by default */
--logi-button-font: -apple-system, "Pretendard Variable", "Segoe UI", sans-serif;
}
.logi-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--logi-button-bg);
color: var(--logi-button-fg);
border: 1px solid var(--logi-button-border);
border-radius: var(--logi-button-radius);
font-family: var(--logi-button-font);
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: opacity 0.15s, transform 0.05s;
user-select: none;
}
.logi-btn:hover { opacity: 0.92; }
.logi-btn:active { transform: scale(0.98); }
.logi-btn--light {
background: var(--logi-button-bg-light);
color: var(--logi-button-fg-light);
}
/* sizes */
.logi-btn--1x1 { width: 44px; height: 44px; padding: 0; }
.logi-btn--2x1 { height: 44px; padding: 0 1rem; font-size: 0.9375rem; }
.logi-btn--4x1 { height: 56px; padding: 0 1.5rem; font-size: 1rem; width: 100%; }
.logi-btn__logo { width: 20px; height: 20px; flex-shrink: 0; }
.logi-btn--4x1 .logi-btn__logo { width: 24px; height: 24px; }
</style>Brand icon:
🔴 canonical: use
~/toy/logi/server/public/icon.svgas-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.
<!-- Web: reference the statically hosted /icon.svg directly -->
<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.svg1x1 — 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>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.
<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.
<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
<script>
let { size = "2x1", theme = "dark", href = "/auth/logi/start" } = $props();
</script>
<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