Authorization page design

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

Tip

When the user clicks the button, they are redirected to Yandex ID for authorization. Set up a link that opens in a new browser window so that the user remains on your website after authorization.

Button design

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

Alert

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

  • The button's color.
  • The button's border width.
  • The button's content: text, icon, or margins between the button elements.

Button types

To increase conversion for authorization, we recommend using the option with the big contrast button:

Short button:

If you don't want to use the main version, you can use the additional one:

Short button:

The additional version can be used to place the Yandex button next to the buttons for other services.

Use the icon button if there's not enough space for a regular button:

Add the Log in with header to the block with the icon button. Don't juxtapose bright colors and use a neutral palette for the background.

Set up size

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

Maximum button width is not limited.

When reducing the button's width, make sure the side margins are not less than the icon width.

Usage examples

If you only have the Yandex button, use the full format:

If there are multiple buttons, add the Log in with header and use the short button format or the icon button:

image image