# Sign in with Avonao ID: button kit (v1)

A link-styled button for the sign-in page of your own site or app. Plain HTML and CSS, no JavaScript, no dependencies. Docs and a live playground: https://id.avonao.com/developers/button

## What is in the kit

| File | What it is |
|---|---|
| `avonao-id-button.css` | The stylesheet. Self-contained; load it once per page. |
| `avonao-id-icon-128.png` | The Avonao ID icon (the pigeon). Host it yourself or use `https://id.avonao.com/brand/avonao/avonao-id-icon-128.png`. |
| `snippets.html` | Every variant with its copy-paste HTML. Open it in a browser, view source or copy from the page. No JavaScript. |
| `svg/avonao-id-<wording>-<theme>-<size>.svg` | Static images for places that cannot load CSS (documents, email templates, slides). `<wording>` is `signin`, `continue` or `signup`; `<theme>` is `dark`, `light` or `outline`; `<size>` is `sm`, `md` or `lg`. |
| `svg/avonao-id-icon-only-<theme>-<size>.svg` | The same for the icon-only square. |

Use the HTML and CSS button on web pages: it is a real link, it scales with the user's settings, it has a focus ring, and it keeps working without JavaScript. The SVG files are pictures: they cannot show a focus ring or inherit your page's text color, and the `outline` SVGs are drawn in `#111111`.

## Quick start

```html
<link rel="stylesheet" href="https://id.avonao.com/avonao-id/button-kit/avonao-id-button.css">

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

The `href` is your own sign-in route (the one that builds the `/authorize` request with `state`, `nonce` and PKCE and keeps the secrets on the server). Never point the button at `https://id.avonao.com/authorize` directly: a link cannot carry a per-visit `state` and PKCE verifier safely. If your site has a strict Content Security Policy, host the CSS and the PNG yourself (`style-src` and `img-src`).

## Variants

| Class | Meaning |
|---|---|
| `avid-btn--dark` (default) | Black button, white label. For light pages. |
| `avid-btn--light` | White button, light-gray border, black label. For dark pages. |
| `avid-btn--outline` | Transparent with a 1 px border and label in the page's text color (`currentColor`). Use it where your own color should carry through. |
| `avid-btn--sm` / `--md` (default) / `--lg` | 32, 40 or 48 px high. |
| `avid-btn--icon` | Icon-only square of the same height. Needs `aria-label="Sign in with Avonao ID"` on the link and no `<span>`. |
| `avid-btn--pill` | Fully rounded corners. Same as `--avid-btn-radius: 9999px`. |

| Size | Height | Icon | Font | Horizontal padding | Gap icon and label | Min width |
|---|---|---|---|---|---|---|
| `sm` | 32 px | 16 px | 14 px / 600 | 12 px | 8 px | 180 px |
| `md` | 40 px | 20 px | 15 px / 600 | 16 px | 10 px | 220 px |
| `lg` | 48 px | 24 px | 16 px / 600 | 20 px | 12 px | 260 px |

## Label

"Sign in with Avonao ID" by default. For other moments: "Continue with Avonao ID" or "Sign up with Avonao ID". US English, sentence case. Never shorten it to "Avonao" alone.

## Tokens

Set these on the button, a wrapper or `:root` to adapt the button. The defaults are in the table.

| Token | `dark` | `light` | `outline` |
|---|---|---|---|
| `--avid-btn-bg` | `#111111` | `#ffffff` | `transparent` |
| `--avid-btn-fg` | `#ffffff` | `#111111` | `currentColor` |
| `--avid-btn-border` | `#111111` | `#d0d0d0` | `currentColor` |
| `--avid-btn-bg-hover` | `#2a2a2a` | `#f4f4f4` | `rgba(127,127,127,.12)` |
| `--avid-btn-focus` | `#2563eb` | `#2563eb` | `#2563eb` |

Also: `--avid-btn-radius` (default `8px`) and `--avid-btn-font` (default: the system font stack; set it to your site's font stack to match your page). If you change colors, keep the contrast at 4.5:1 or more for the label and 3:1 or more for the border and the focus ring.

## Behavior and accessibility

* Hover changes only the background. Pressed uses the hover background with a 1 px inset shadow.
* Focus: a 2 px solid ring in `--avid-btn-focus` with a 2 px offset, shown for keyboard focus (`:focus-visible`).
* Touch: on touch screens the hit area grows to at least 44 x 44 px without changing the layout.
* Disabled: 50 % opacity and `aria-disabled="true"`. On a link, also leave out the `href` (and add `role="link"` and `tabindex="-1"`), so the keyboard cannot follow it.
* Reduced motion: the only animation is a 120 ms background fade, and it is off for `prefers-reduced-motion: reduce`.
* No tracking parameters on the link. The button loads nothing but its stylesheet and the icon.

## Brand rules

* The pigeon is the Avonao ID icon and nothing else. Use it only in this button and as the Avonao ID icon.
* The Avonao wordmark has no icon in front of it. Never put the pigeon next to it, and never use the wordmark or the red AVONAO square in this button.
* The red AVONAO square is the site icon (favicon). It does not appear in the button.
* Do not recolor, rotate or crop the pigeon, and scale it only in proportion. Keep a clear space of at least a quarter of the icon size around it (the kit sizes already do).
* The label is one of the three wordings above, in US English and sentence case.

## Regenerating the generated files

`svg/` and `snippets.html` are generated from the spec in the Avonao ID repository (`components/avonao-id/signin-button/`) with `node_modules/.bin/jiti components/avonao-id/signin-button/build-kit.ts`. Do not edit them by hand.