Buttons

These buttons are for external use on your website or mobile app. They give users a familiar pasby entry point for same-device identification — when the user taps a button on the same device as their pasby app, the flow can autostart after your backend creates the request.

Design

Buttons ship in three themes. We recommend vermilion (brand red) or light on pale backgrounds; use dark on charcoal or navy layouts.

Brand rules and additional assets: pasby brand portal.

Dimensions: 252 × 56 px, corner radius 8 px. Do not alter the pasby mark or proportions.

Button types

How to integrate

Static SVG (most common) — Download the asset for your button type and theme (tables below), then use it as you would any image: wrap in <button> or <a>, attach your click handler, and start the pasby flow from your backend.

<button type="button" onclick="startPasbyLogin()">
  <img src="/assets/pasby/login-vermilion.svg" alt="Login with pasby" width="252" height="56" />
</button>

Hosted web login (OIDC) — If you redirect users to pasby-hosted identification rather than same-device API flows, use LoginButton from @finsel-dgi/pasby-next. It handles routing and branded styling for App Router apps.

Custom SVG in React — The downloadable assets are plain SVG. You may inline them or render them as <img>; theme colors are fixed per file (vermilion, light, dark).

Login

Sign up

Use when you want distinct copy for “Sign up with pasby” vs login.

Link

For linking a pasby eID to an existing account.

Identify

Generic “Identify with pasby” label when you do not need separate login vs signup copy.

Confirm

For confirm signing flows (action: "confirm").

Sign

For sign actions (action: "sign") — documents and agreements.

Logo assets

Standalone pasby logomarks (not full buttons):

Related

• Identification guide — same-device flows
• Signing guide — confirm and sign actions
• Next.js OIDC — hosted login button
• Device patterns — when same-device applies