github-buttons

To get started, checkout buttons.github.io!

Features

Unlimited Button Types
Our github:button generator provides 6 basic button types including follow, watch, star, fork, issue and download, each at normal or large size, with or without a dynamic count. In addition, almost everything including the API for dynamic count is customizable via simple HTML markup.
Pixel Perfect
Octicons based vector icons always look sharp on every display. The automatically sized iframe solves the big headache of iframe sizing. Plus, its high precision sizing algorithm works the best for HiDPI displays.
Fast
Hosted on GitHub Pages, this service delivers high performance and availability, using asynchronous code that never blocks the page loading.
Stable
High test coverage for the main library and automated tests on Circle CI assure the service quality.
Backward Compatible
As you may still need this, outdated browsers like IE 6 are supported.
Accessibility
ARIA label support enables accessibility for screen reader users.

Documentation

Usage

Add as many <a class="github-button"> as you like, then put the <script> anywhere on your page.

Syntax

<a class="github-button"
   href="{{ link }}"
   data-icon="{{ octicon }}"
   data-count-href="{{ count_link }}"
   data-count-api="{{ count_api }}"
   data-count-aria-label="{{ count_aria_label }}"
   data-style="{{ style }}"
   data-text="{{ button_text }}"
   aria-label="{{ button_aria_label }}"
   >{{ text }}</a>

<script async defer src="https://buttons.github.io/buttons.js"></script>

Attributes

Attribute	Description
`href`	GitHub link for the button.
`data-icon`	Octicon for the button. It defaults to `octicon-mark-github`. All available icons can be found at Octicons.
`data-count-href`	GitHub link for the count. It defaults to `href` value. Relative URL will be relative to `href` value.
`data-count-api`	GitHub API endpoint and the key path (`#hash`) for the count.
`data-count-aria-label`	Aria label for the count link. `#` in this attribute will be replaced with a real count.
`data-style`	`default` or `mega`.
`data-text`	Text displayed on the button. This option will override `link_text`.
`text`	Text displayed on the button and the fallback link.
`aria-label`	Aira label for the button link.

API Endpoint

You can use any GitHub API endpoint that supports GET request.

You must append a #hash to the endpoint URL to specify a key path for a deep property.

e.g. /repos/octocat/hello-world#owner.login will use owner.login.
e.g. /users/octocat/repos#[0].open_issues_count will use open_issues_count from the first enrty in the array.

See GitHub Developer for API references.

Development

Clone

git clone --recursive https://github.com/ntkme/github-buttons.git

cd github-buttons && npm install

Build

cake build

Test

cake test

License

See LICENSE.md.

zhangjikai / github-buttons