Button kit
The official button as a plain link: one stylesheet and a few lines of HTML. There is an SVG of every variant too. Nothing here needs JavaScript.
Try it
Pick a variant. The preview is the real button, and the snippets below it are for exactly what you see.
This is the real button. Tab to it to see the focus ring; the link does nothing here.
A path on your site, or an https:// address. Never the /authorize URL of Avonao ID.
<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>Add it to your page
- Load the stylesheet once, in the
<head>of every page that has the button:<link rel="stylesheet" href="https://id.avonao.com/avonao-id/button-kit/avonao-id-button.css"> - Paste the button where you want it. This is the default: dark, medium,
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="https://id.avonao.com/brand/avonao/avonao-id-icon-128.png" alt="" width="20" height="20"> <span>Sign in with Avonao ID</span> </a> - Point
hrefat your own sign-in route (/api/auth/avonao/startin the Quickstart), which builds the request withstateand PKCE and sends the member on. The button never links to Avonao ID's/authorizedirectly.
If your Content Security Policy is strict, allow https://id.avonao.com in style-src and img-src, or host both files yourself: copy avonao-id-button.css and the icon from Files to your server and change the two URLs. Tick "Host the files myself" above to get the snippets for that.
Using React? The markup is the same: the React / JSX
tab has it.
All variants
Every theme and size, with the wording Sign in with Avonao ID
, as a labeled button and as an icon-only button. Copy HTML gives the markup of that one. The other wordings (Continue with Avonao ID
, Sign up with Avonao ID
) are in the playground above and in the files below. These previews do nothing when clicked.
Dark
For light pages. The default.
Light
For dark pages.
Outline
Takes the text color of your page, so it fits on light and dark pages alike.
Sizes and colors
| Size | Class | Height | Icon | Label | Side padding | Gap | Min width |
|---|---|---|---|---|---|---|---|
| Small | avid-btn--sm | 32 px | 16 px | 14 px, 600 | 12 px | 8 px | 180 px |
| Medium | avid-btn--md | 40 px | 20 px | 15 px, 600 | 16 px | 10 px | 220 px |
| Large | avid-btn--lg | 48 px | 24 px | 16 px, 600 | 20 px | 12 px | 260 px |
Icon-only buttons are squares as high as the size they use (32, 40 or 48 px). Corners are 8 px; add avid-btn--pill for fully rounded ones.
| 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 |
Hover changes only the background. Pressed adds a 1 px inset shadow. The focus ring is a 2 px outline, offset by 2 px, in --avid-btn-focus. A disabled button is at 50 % opacity.
Customize
Colors, corners and font are custom properties. Set them on :root to change every button (a color set there applies to all three themes), or on a wrapper or the button itself to change some. After a change, check the contrast again: at least 4.5:1 for the label, and 3:1 for the border and the focus ring.
/* every button on the page */
:root {
--avid-btn-radius: 12px;
--avid-btn-font: "Inter", system-ui, sans-serif; /* default: the system font */
}
/* one button, in your brand color */
.checkout .avid-btn {
--avid-btn-bg: #0b3d91;
--avid-btn-border: #0b3d91;
--avid-btn-bg-hover: #0a2f70;
}Do not recolor, rotate, crop or animate the icon, and keep the wording. The Brand rules list what is allowed.
Files
Served from https://id.avonao.com/avonao-id/button-kit/. Download any of them one by one; there is no archive.
| File | What it is |
|---|---|
| avonao-id-button.css | The stylesheet. Self-contained: no framework, no JavaScript, no fonts or images loaded from it. |
| avonao-id-icon-128.png | The Avonao ID icon (the pigeon) at 128 px, for the <img> inside the button. It shows crisp at up to 64 px. |
| snippets.html | Every variant as copy-paste HTML, without JavaScript. |
| README.md | How to use the kit in two minutes. |
SVG, one per variant
Each SVG is a complete button, for a place where you cannot load the stylesheet (an email, a slide, a design file). They are not meant for a web page: the HTML button is a real link, keeps the focus ring and scales with text size. The files are in /avonao-id/button-kit/svg/.
| Wording | Theme | Small | Medium | Large |
|---|---|---|---|---|
| Sign in | Dark | sm | md | lg |
| Sign in | Light | sm | md | lg |
| Sign in | Outline | sm | md | lg |
| Continue | Dark | sm | md | lg |
| Continue | Light | sm | md | lg |
| Continue | Outline | sm | md | lg |
| Sign up | Dark | sm | md | lg |
| Sign up | Light | sm | md | lg |
| Sign up | Outline | sm | md | lg |
| Icon only | Dark | sm | md | lg |
| Icon only | Light | sm | md | lg |
| Icon only | Outline | sm | md | lg |
Accessibility
- It is a link (
<a href>), so the keyboard, screen readers andopen in new tab
work without any code. - The icon has
alt=""because the label carries the meaning. An icon-only button needsaria-labelwith the full wording; the snippets include it. - On touch screens the clickable area is at least 44 by 44 px, and the layout does not move.
- The focus ring shows for the keyboard, not for the mouse. Colors keep the contrast above. Animation is a 0.12 s color fade and is off for people who ask for reduced motion. In Windows high-contrast mode the button keeps a visible edge.
- A disabled link has no
href, is out of the tab order and hasaria-disabled="true". Use it for the moment between a click and the page change, not as a permanent state.
Avonao ID
