To get started, checkout buttons.github.io!
The easiest way to get started is to use the github:button generator.
<!-- Place this tag where you want the button to render. -->
<a class="github-button"
href="{{ link }}"
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>
Attribute | Description |
---|---|
href |
GitHub link for the button. |
data-icon |
Octicon for the button. octicon-mark-github . Available icons can be found at Octicons. |
data-size |
None by default or large . |
data-show-count |
false by default or true . The dynamic count is generated based on detected button type. |
data-text |
Text displayed on the button. It defaults to the text content within the link. |
aria-label |
Aira label for the button link. |
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. Keep in mind that it works only in browser.
var GitHubButtons = require('github-buttons')
It is recommended to use a module bundler rather than a module loader.
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 --recursive https://github.com/ntkme/github-buttons.git
cd github-buttons && npm install
npm run build
npm test
See LICENSE.md.