@davidmaxwaterman2/github-button NPM

\<github-button>

Simple github button that can be use only to link github, users, projects and other stuff. Active only on https://github.com domain. With the link attribute you can set the path into the github.com world you want link to. Best use case to link the open-source project is inserted to.

🕹️ Examples

Github Button

<style>
  color-scheme-button {
      width: 128px;
      height: 128px;

      --icon-color: #333;
      --background-color: red;
    }
</style>

<!-- Relative link -->
<github-button
  link="CICCIOSGAMINO/github-button.git">
</github-button>

<!-- Absolute link -->
<github-button
  link="https://github.com/CICCIOSGAMINO/github-button.git">
</github-button>

<!-- Open in new window (default is 'current') -->
<github-button
  link="CICCIOSGAMINO/github-button.git"
  target-window="new">
</github-button>

🚀 Usage

Install package

npm install --save @cicciosgamino/github-button

Import

<!-- Import Js Module -->
<script type="module">
  // Importing this module registers <progress-ring> as an element that you
  // can use in this page.
  //
  // Note this import is a bare module specifier, so it must be converted
  // to a path using a server such as @web/dev-server.
  import '@cicciosgamino/github-button'
</script>

Place in your HTML

<github-button
  link="https://github.com/CICCIOSGAMINO/github-button.git">
</github-button>

🐝 API

📒 Properties/Attributes

Attribute	Property	Type	Default	Description
link	link	String	`''`	Github Absolute / Relative path to user / project
target-window	targetWindow	String	`'current'`	Open

Methods

None

Events

None

🧁 CSS Custom Properties

Name	Default	Description
`--icon-color`	`#000`	SVG fill attribute
`--background-color`	`transparent`	Background color of element

💪 Accessibility

Acessibility is guaranted with the use of a button with the title and aria-label set on it. SVG icons inside the inner button are set role=img,aria-hidden="true",focusable="false" .