github-buttons

To get started, checkout buttons.github.io!

Documentation

Quick Start

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

Components

• GithubButton.vue for Vue
• GitHubButton.js for React
• github-button.component.ts for Angular

Basic Usage (without component)

Markup Syntax

<!-- 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>

Config

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.

Built-in Button Types

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)

Advanced Usage

Import as a Module

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.

Render a Button

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)

Development

Clone

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

cd github-buttons && npm install

Build

npm run build

Test

npm test

See also

• mdo/github-buttons

License

See LICENSE.md.