# Privy Button

The user journey starts from a button on the merchant page. Use the PrivyID
button, so that users recognize PrivyID before the widget opens.

The button text is flexible and follows the action in your product. The text
must always include "with PrivyID".

## Button variants

Use one of the three button styles, as applicable to your design and
background.

<figure>
  <img
    src="/digital-id/images/figure-04.png"
    alt="Three Login with PrivyID buttons for light backgrounds: solid red, red outline, and neutral gray outline"
    style={{ borderRadius: "0.5rem" }}
  />
  <figcaption>Button variants for light backgrounds.</figcaption>
</figure>

| Variant | When to use |
| --- | --- |
| Primary, solid | On a light background, when the button must stand out. |
| Primary, outlined | When the button must be more subtle, but still prominent. |
| Neutral | When the button must blend with the page, but keep the brand presence. |

On a dark background, use these styles:

<figure>
  <img
    src="/digital-id/images/figure-06.png"
    alt="Three Login with PrivyID buttons on a dark background: white with red text, white outline, and white with dark text"
    style={{ borderRadius: "0.5rem" }}
  />
  <figcaption>Button variants for dark backgrounds.</figcaption>
</figure>

## Button copy

The button text shows the action that the user does in your product. You can
use wording such as "Continue with", "Login with", "Sign In with",
"Register with", or "Apply with". The mandatory part is "with PrivyID".

These examples are only illustrations. Make the copy match the user journey of
your product.

<figure>
  <img src="/digital-id/images/figure-07.png" alt="Continue with PrivyID and Login with PrivyID buttons" style={{ borderRadius: "0.5rem" }} />
  <img src="/digital-id/images/figure-08.png" alt="Register with PrivyID and Sign In with PrivyID buttons" style={{ borderRadius: "0.5rem" }} />
  <img src="/digital-id/images/figure-09.png" alt="Apply with PrivyID and Access with PrivyID buttons" style={{ borderRadius: "0.5rem" }} />
  <figcaption>Button copy examples. The action text can change, but "with PrivyID" must always follow it.</figcaption>
</figure>

## Typography

Google Sans Flex is the recommended typeface for the PrivyID button. You can
also use the existing UI typeface of your product, for consistency with your
interface.

If you use another typeface, select a clear, legible sans-serif font. Keep the
recommended text size, weight, and proportions of this guideline.

## Layout and color

Keep the clear space, alignment, and proportions of this guideline.

| Element | Value |
| --- | --- |
| Button color | `#E60034` |
| Text size | 16 px (example) |
| Logo height | 2 × text height |
| Horizontal padding (left and right) | 3b |
| Vertical padding (top and bottom) | b |

<figure>
  <img
    src="/digital-id/images/figure-10.png"
    alt="Color swatches: #E60034 and #000000"
    style={{ borderRadius: "0.5rem", maxWidth: "480px" }}
  />
  <figcaption>Button colors.</figcaption>
</figure>

## Radius

Use a corner radius that fits your design. For example, use 8 px, or a fully
rounded button (100 px or 50%).

<figure>
  <img
    src="/digital-id/images/figure-12.png"
    alt="Two Login with PrivyID buttons: one with an 8 px radius and one fully rounded"
    style={{ borderRadius: "0.5rem" }}
  />
  <figcaption>Radius examples: 8 px and fully rounded.</figcaption>
</figure>

## Proportions

Keep these ratios between the text, the logo, and the button edges:

| Measure | Rule |
| --- | --- |
| a | The height of the button text. |
| b | The space above and below the logo, and the gap between the text and the logo. |
| 2b | The height of the logo: two times the text height. |
| 3b | The space between the button edge and the content, on the left and the right. |

<div style={{ display: "flex", flexWrap: "wrap", gap: "1rem", alignItems: "flex-start" }}>
  <figure style={{ margin: 0, width: "360px" }}>
    <img src="/digital-id/images/figure-11.png" alt="Solid Login with PrivyID button annotated with the a, b, 2b, and 3b measures" style={{ borderRadius: "0.5rem" }} />
    <figcaption>Solid variant.</figcaption>
  </figure>
  <figure style={{ margin: 0, width: "360px" }}>
    <img src="/digital-id/images/figure-14.png" alt="Outlined Login with PrivyID button annotated with the a, b, 2b, and 3b measures" style={{ borderRadius: "0.5rem" }} />
    <figcaption>Outlined variant.</figcaption>
  </figure>
</div>

## Logo asset

Contact the Privy team for the PrivyID logo asset for the button.