To get started, checkout buttons.github.io!

The easiest way to get started is to use the github:button generator.

• github-buttons/dist/vue for Vue
• github-buttons/dist/react for React
• github-buttons/dist/angular for Angular

<!-- Place this tag where you want the button to render. -->
<a class="github-button"
   href="{{ link }}"
   title="{{ title }}"
   data-icon="{{ octicon }}"
   data-size="{{ size }}"
   data-show-count="{{ show count }}"
   data-text="{{ text }}"
   aria-label="{{ aria label }}"
   >{{ text }}</a>

<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>

Button type is detected through button's href attribute.

• https://github.com/:user (follow)
• https://github.com/:user/:repo (star)
• https://github.com/:user/:repo/subscription (watch)
• https://github.com/:user/:repo/fork (fork)
• https://github.com/:user/:repo/issues (issues)
• https://github.com/:user/:repo/issues/new (issues)

Tailing slash, query string, and hash in the href are handled.

• https://github.com/:user/ (follow)
• https://github.com/:user?tab=repositories (follow)
• https://github.com/:user/:repo#license (star)
• https://github.com/:user/:repo/#license (star)

This module works with CommonJS or AMD loader.

The default behavior of including the <script> tag is to render all the <a class="github-button"> tags on the page. This behavior is turned off when loading as a module.

var GitHubButtons = require('github-buttons')

It is recommended to use a module bundler rather than a module loader.

Loading this module as <script> tag together with require.js will cause an error.

This is intentional. To avoid the ambiguity on default behavoir, you should load the module via RequireJS API like following:

require(['https://buttons.github.io/buttons.js'], function (GitHubButtons) {
  GitHubButtons.render()
});

To create buttons dynamically, you will use the render() function, which is a named export of this module.

GitHubButtons.render(target, config)

• target is a DOM node to be replaced by a button.
• config is an object containing the attributes.

To append the button to a parent node instead, you need to create a placeholder as target.

GitHubButtons.render(parentNode.appendChild(document.createElement('span')), config)

Alternatively, config can be read from the target if it is an Anchor (<a>) with attributes.

GitHubButtons.render(target)

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

cd github-buttons && npm install

npm run build

npm test

• mdo/github-buttons

See LICENSE.md.