github-buttons
v2.29.0
Published
GitHub Buttons
Downloads
140,081
Readme
github-buttons
Usage
Use as a Snippet
Get started quickly with github:button configurator.
Use as a Component
Use as a Module
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 of 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
License
See LICENSE.