github-buttons

Circle CI

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

See also

License

See LICENSE.md.

Related Repositories

css3-github-buttons

css3-github-buttons

Helps you easily create GitHub-style buttons and toolbars using links, buttons, ...

css3-github-buttons

css3-github-buttons

Helps you easily create GitHub-style buttons from links, buttons, and inputs. ...

css3-github-buttons

css3-github-buttons

Helps you easily create GitHub-style buttons from links, buttons, and inputs. ...

css3-github-buttons

css3-github-buttons

Helps you easily create GitHub-style buttons from links, buttons, and inputs. ...

css3-github-buttons

css3-github-buttons

Helps you easily create GitHub-style buttons from links, buttons, and inputs. ...


Top Contributors

ntkme