Authorization page design

You can design the link for obtaining an OAuth token as a button with the Yandex logo.

Tip

When the user press the button, they're redirected to Yandex ID for authorization. If you want the user to stay on your website after authorization, set up a link that opens in a new browser window.

Button appearance

Customize the button to make it match the style of your website or app:

Alert

The button appearance must meet the general Yandex requirements. When adding the button to your website or app, you can't change:

  • Button color.
  • Outline width.
  • Button content: text, icon, and space between the button elements.

Button types

To increase the conversion rate for authorization, we recommend using a big button with nice contrast:

Use a minimized version when the button's size isn't big enough to display the full text:

If the primary version doesn't suit your needs, use the secondary one:

Minimized option:

The secondary version may be useful when you need to place the Yandex button next to the buttons of other services.

Use an icon button when there isn't enough space for a regular one:

Make sure to include a Log in with text description in the icon button's container. Avoid using bright colors nearby and use a neutral palette for the background.

Size customization

Choose the option that suits you best. You can further reduce or increase the button's height, while maintaining the aspect ratio.

L / 56px

M / 44px

S / 36px

There is no maximum width limit.

When reducing the button width, make sure that the left and right padding is at least as wide as the icon:

Usage examples

If there are no buttons of other services next to the Yandex button, use the full-size version:

If there are multiple buttons, add a Log in with text description for them and use the minimized version or the icon button:

image