# github-buttons

> GitHub Buttons

Latest version **2.33.0** (published 2026-07-15) · BSD-2-Clause license · 0 weekly downloads

## Install

```sh
npm install github-buttons
pnpm add github-buttons
yarn add github-buttons
bun add github-buttons
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.33.0 |
| Published | 2026-07-15 |
| First published | 2016-07-11 |
| Weekly downloads | 0 |
| License | BSD-2-Clause |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 106.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 1147 |
| Author | なつき |
| Maintainers | ntkme |
| Keywords | github, button, frontend, component |

## Links

- npm: https://www.npmjs.com/package/github-buttons
- Repository: https://github.com/buttons/github-buttons
- Homepage: https://buttons.github.io/
- Issues: https://github.com/buttons/github-buttons/issues
- npm.io page: https://npm.io/package/github-buttons

## Recent versions

- 2.33.0 (latest) — 2026-07-15
- 2.32.0 — 2026-03-23
- 2.31.1 — 2026-03-02
- 2.31.0 — 2026-02-02
- 2.30.0 — 2026-01-19
- 2.29.1 — 2024-10-04
- 2.29.0 — 2024-08-22
- 2.28.1 — 2024-07-31
- 2.28.0 — 2024-04-23
- 2.27.0 — 2023-04-06
- 2.26.0 — 2023-03-30
- 2.25.0 — 2023-03-30
- 2.24.0 — 2023-02-17
- 2.23.0 — 2023-02-11
- 2.22.3 — 2023-01-13
- … 64 more at https://npm.io/package/github-buttons/versions

## README

github-buttons
==============

[![build](https://github.com/buttons/github-buttons/actions/workflows/build.yml/badge.svg)](https://github.com/buttons/github-buttons/actions/workflows/build.yml)
[![npm](https://img.shields.io/npm/v/github-buttons)](https://www.npmjs.com/github-buttons)

Usage
-----

### Use as a Snippet

Get started quickly with **[github:button configurator](https://buttons.github.io)**.

### Use as a Component

- [vue-github-button](https://github.com/buttons/vue-github-button) for [Vue](https://vuejs.org)
- [react-github-btn](https://github.com/buttons/react-github-btn) for [React](https://reactjs.org)

### Use as a Module

``` javascript
import { render } from 'github-buttons'

// export function render(options: object, callback: (el: HTMLElement) => void): void;
render(options, function (el) {
  document.body.appendChild(el) 
})

// export function render(anchor: HTMLAnchorElement, callback: (el: HTMLElement) => void): void;
render(anchor, function (el) {
  anchor.parentNode.replaceChild(el, anchor)
})
```

### Options

- For snippet usage, an option is an attribute on `<a>` element.
- For component usage, an option is a prop on component.
- For module usage, an option is a property on `options` object.

##### `href`

- Type: `string` 
- Default: `'#'`

Assign `href` attribute (GitHub link) for button.

##### `title`

- Type: `string`
- Default: `undefined`

Assign `title` attribute for button.

##### `data-icon`

- Type: `string`
- Default: `'octicon-mark-github'`

Set icon on button. A [subset](rollup.config.mjs) of [Octicons](https://primer.style/octicons/) is bundled.

##### `data-color-scheme`

- Type: `string`
- Default: `undefined`

Define a mapping of system color scheme to widget color scheme in css-like syntax.

This is an _opt-in_ feature since version `>=2.3.0`. It means if `data-color-scheme` is `undefined`, it would still behave like version `<2.3.0`, where light color scheme is used under all conditions.

Once `data-color-scheme` is set to a string, it will inherit the default mapping: `no-preference: light; light: light; dark: dark;`.

- `no-preference: light;` means when system has no preference on color scheme, light color scheme will be used.
- `light: light;` means when system prefers light color scheme, light color scheme will be used.
- `dark: dark;` means when system prefers dark color scheme, dark color scheme will be used.

User declarations would override the default. For example:

- To enable color scheme using default, set `data-color-scheme=""`.
- To use dark color scheme when system has no preference, set `data-color-scheme="no-preference: dark;"`.
- To force light color scheme everywhere, set `data-color-scheme="dark: light;"`.
- To force dark color scheme everywhere, set `data-color-scheme="no-preference: dark; light: dark;"`.

A single word can be used to force the color scheme everywhere since version `>=2.11.0`. For example:

- To force light color scheme everywhere, set `data-color-scheme="light"`.
- To force dark color scheme everywhere, set `data-color-scheme="dark"`.

##### `data-size`

- Type: `string`
- Default: `undefined`

Set button size. Possible values are `undefined` and `'large'`.

##### `data-show-count`

- Type: `boolean`
- Default: `false`

Show a dynamic count based on button type (detected from `href`):

- `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` won't affect type detection:

- `https://github.com/:user/` (follow)
- `https://github.com/:user?tab=repositories` (follow)
- `https://github.com/:user/:repo#readme` (star)
- `https://github.com/:user/:repo/#readme` (star)

##### `data-text`

- Type: `string`
- Default: `undefined`

Set button text. When button is generated from `<a>` element and `data-text` is `undefined`, the button text will be anchor's `textContent`.

##### `aria-label`

- Type: `string`
- Default: `undefined`

Set `aira-label` for button.

---

See also
--------

- [mdo/github-buttons](https://ghbtns.com)

---

License
-------

See [LICENSE](LICENSE).

---
_Source: https://npm.io/package/github-buttons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._