Login button — iOS (SwiftUI)

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

📍 Jump-to Index

• L22-L40: ## 1. Add the icon asset
• L41-L102: ## 2. The button (Hero / 4x1 equivalent)
• L103-L113: ## 3. Verify — on screen, not by build success
• L114-L119: ## Brand rules (summary)

---

Login button — iOS (SwiftUI)

iOS has no <img src> — placing the SVG into the Asset Catalog is the asset step. Button copy, wording, and brand rules are identical to Login button component; this page covers only the iOS asset pipeline.

1. Add the icon asset

curl -o LogiIcon.svg https://www.1pass.dev/icon.svg

In Xcode:

1. Assets.xcassets → New Image Set → name it LogiIcon
2. Drag LogiIcon.svg into the 1x slot
3. In the inspector — Scales: Single Scale · Preserve Vector Data ✔ · Render As: Original Image

🚨 Danger: Render As: Template kills the gradient The gradient dot IS the logi identity. Rendered as a template image, the whole icon gets tinted to a single foregroundColor — violating the brand guide's "no color separation" rule. Adding .renderingMode(.template) to Image("LogiIcon") is the same accident — don't.

2. The button (Hero / 4x1 equivalent)

Style is a matter of taste — all three variants are supported, and the app guides default to the neutral outline (the web page defaults to brand blue — Login button component). Radius 12 is the iOS convention.

// Shared label — used by all three variants
private var logiLabel: some View {
    HStack(spacing: 8) {
        Image("LogiIcon")
            .resizable()
            .scaledToFit()
            .frame(width: 24, height: 24)
        Text("Sign in with logi")
            .fontWeight(.semibold)
    }
    .frame(maxWidth: .infinity, minHeight: 56)
}

Neutral outline (app default example) — canvas surface + border, balanced presence next to other SSO buttons:

Button { /* start OAuth */ } label: { logiLabel }
    .foregroundStyle(.primary)
    .background(
        RoundedRectangle(cornerRadius: 12)
            .stroke(Color.primary.opacity(0.15), lineWidth: 1)
    )

Brand blue — colors from the icon's dot gradient, same in light/dark:

Button { /* start OAuth */ } label: { logiLabel }
    .foregroundStyle(.white)
    .background(
        LinearGradient(colors: [Color(red: 0, green: 0.53, blue: 1),      // #0088FF
                                Color(red: 0, green: 0.25, blue: 0.90)],  // #0041E6
                       startPoint: .topLeading, endPoint: .bottomTrailing),
        in: RoundedRectangle(cornerRadius: 12)
    )

Inverting (the web's former default) — navy in light, white in dark:

@Environment(\.colorScheme) private var colorScheme

Button { /* start OAuth */ } label: { logiLabel }
    .foregroundStyle(colorScheme == .dark ? Color(red: 0.06, green: 0.09, blue: 0.16) : .white)
    .background(colorScheme == .dark ? Color.white : Color(red: 0.06, green: 0.09, blue: 0.16),  // #0F172A
                in: RoundedRectangle(cornerRadius: 12))

For icon-only (1x1, 44×44) drop the Text and always add .accessibilityLabel("Sign in with logi") — without text, VoiceOver cannot convey the meaning.

3. Verify — on screen, not by build success

A missing asset or a typo in the name is not a compile error. If the name in Image("LogiIcon") is wrong, you get an empty slot at runtime (the same failure shape as the web's silent 302 empty icon).

xcrun simctl launch <UDID> <bundle-id>
xcrun simctl io <UDID> screenshot login.png   # confirm the icon renders, with your eyes

Brand rules (summary)

Copy "Sign in with logi" · minimum 32×32pt · no distortion / rotation / color separation — full table at Login button component › Brand guide.