Sign in with Avonao ID: button snippets

Copy a snippet into your sign-in page. Every one is a plain link to your own sign-in route (/api/auth/avonao/start here: change the href to yours). Put avonao-id-button.css and avonao-id-icon-128.png next to your page, or point the two URLs at https://id.avonao.com/avonao-id/button-kit/avonao-id-button.css and https://id.avonao.com/brand/avonao/avonao-id-icon-128.png. Read README.md for the brand rules.

<link rel="stylesheet" href="avonao-id-button.css">

dark

Use on light pages.

dark, sm (32 px)

<a class="avid-btn avid-btn--sm avid-btn--dark" href="/api/auth/avonao/start">
  <img class="avid-btn__icon" src="avonao-id-icon-128.png" alt="" width="16" height="16">
  <span>Sign in with Avonao ID</span>
</a>

dark, md (40 px)

<a class="avid-btn avid-btn--md avid-btn--dark" href="/api/auth/avonao/start">
  <img class="avid-btn__icon" src="avonao-id-icon-128.png" alt="" width="20" height="20">
  <span>Sign in with Avonao ID</span>
</a>

dark, lg (48 px)

<a class="avid-btn avid-btn--lg avid-btn--dark" href="/api/auth/avonao/start">
  <img class="avid-btn__icon" src="avonao-id-icon-128.png" alt="" width="24" height="24">
  <span>Sign in with Avonao ID</span>
</a>

light

Use on dark pages.

light, sm (32 px)

<a class="avid-btn avid-btn--sm avid-btn--light" href="/api/auth/avonao/start">
  <img class="avid-btn__icon" src="avonao-id-icon-128.png" alt="" width="16" height="16">
  <span>Sign in with Avonao ID</span>
</a>

light, md (40 px)

<a class="avid-btn avid-btn--md avid-btn--light" href="/api/auth/avonao/start">
  <img class="avid-btn__icon" src="avonao-id-icon-128.png" alt="" width="20" height="20">
  <span>Sign in with Avonao ID</span>
</a>

light, lg (48 px)

<a class="avid-btn avid-btn--lg avid-btn--light" href="/api/auth/avonao/start">
  <img class="avid-btn__icon" src="avonao-id-icon-128.png" alt="" width="24" height="24">
  <span>Sign in with Avonao ID</span>
</a>

outline

Takes the text colour of the page (here: dark gray); use where the page's own colour should carry through.

outline, sm (32 px)

<a class="avid-btn avid-btn--sm avid-btn--outline" href="/api/auth/avonao/start">
  <img class="avid-btn__icon" src="avonao-id-icon-128.png" alt="" width="16" height="16">
  <span>Sign in with Avonao ID</span>
</a>

outline, md (40 px)

<a class="avid-btn avid-btn--md avid-btn--outline" href="/api/auth/avonao/start">
  <img class="avid-btn__icon" src="avonao-id-icon-128.png" alt="" width="20" height="20">
  <span>Sign in with Avonao ID</span>
</a>

outline, lg (48 px)

<a class="avid-btn avid-btn--lg avid-btn--outline" href="/api/auth/avonao/start">
  <img class="avid-btn__icon" src="avonao-id-icon-128.png" alt="" width="24" height="24">
  <span>Sign in with Avonao ID</span>
</a>

Icon only

A square with the pigeon. It needs the aria-label; keep it for tight spaces, not as the only sign-in option on a page.

icon only, dark, md

<a class="avid-btn avid-btn--md avid-btn--dark avid-btn--icon" href="/api/auth/avonao/start" aria-label="Sign in with Avonao ID">
  <img class="avid-btn__icon" src="avonao-id-icon-128.png" alt="" width="20" height="20">
</a>

icon only, light, md

<a class="avid-btn avid-btn--md avid-btn--light avid-btn--icon" href="/api/auth/avonao/start" aria-label="Sign in with Avonao ID">
  <img class="avid-btn__icon" src="avonao-id-icon-128.png" alt="" width="20" height="20">
</a>

icon only, outline, md

<a class="avid-btn avid-btn--md avid-btn--outline avid-btn--icon" href="/api/auth/avonao/start" aria-label="Sign in with Avonao ID">
  <img class="avid-btn__icon" src="avonao-id-icon-128.png" alt="" width="20" height="20">
</a>

Wording

Use the wording that fits the moment. Sentence case, never shortened to "Avonao".

"Sign in with Avonao ID"

<a class="avid-btn avid-btn--md avid-btn--dark" href="/api/auth/avonao/start">
  <img class="avid-btn__icon" src="avonao-id-icon-128.png" alt="" width="20" height="20">
  <span>Sign in with Avonao ID</span>
</a>

"Continue with Avonao ID"

Continue with Avonao ID

<a class="avid-btn avid-btn--md avid-btn--dark" href="/api/auth/avonao/start">
  <img class="avid-btn__icon" src="avonao-id-icon-128.png" alt="" width="20" height="20">
  <span>Continue with Avonao ID</span>
</a>

"Sign up with Avonao ID"

<a class="avid-btn avid-btn--md avid-btn--dark" href="/api/auth/avonao/start">
  <img class="avid-btn__icon" src="avonao-id-icon-128.png" alt="" width="20" height="20">
  <span>Sign up with Avonao ID</span>
</a>

Shape and state

pill (set --avid-btn-radius: 9999px, or add avid-btn--pill)

<a class="avid-btn avid-btn--md avid-btn--dark avid-btn--pill" href="/api/auth/avonao/start">
  <img class="avid-btn__icon" src="avonao-id-icon-128.png" alt="" width="20" height="20">
  <span>Sign in with Avonao ID</span>
</a>

disabled (no href, aria-disabled)

<a class="avid-btn avid-btn--md avid-btn--dark" role="link" aria-disabled="true" tabindex="-1">
  <img class="avid-btn__icon" src="avonao-id-icon-128.png" alt="" width="20" height="20">
  <span>Sign in with Avonao ID</span>
</a>

Without an href the link cannot be followed, even from the keyboard.