@matt-baillie/github-button

1.1.18 • Public • Published

GitHub issues npm version

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

examplesusageapiaccessibilitytodo

🕹️ Examples

Github Button

<style>
  color-scheme-button {
    width: 128px;
    height: 128px;
    --background-color: purple;
    --icon-color: #333;
  }
</style>

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

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

🚀 Usage

  1. Install package
npm install --save @matt-baillie/github-button
  1. 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 "@matt-baillie/github-button";
</script>
  1. Place in your HTML
<github-button link="https://github.com/matt-baillie/github-button.git">
</github-button>

🐝 API

📒 Properties/Attributes

| Name | Type | Default | Description | | --------- | ------ | ------- | ---------------------------------------------------- | --- | --- | --- | ----------------------------------- | | link | String | '' | Github Absolute / Relative path to user / project | | newwindow | String | false | Attribute to control whether link is opened in a new | | | | window/tab or in the current window |

Methods

None

Events

None

🧁 CSS Custom Properties

Name Default Description
--icon-color #000 SVG fill attribute
--background-color #fff SVG background color

💪 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" .

🔧 TODO

  • [ ] Better Documentation

🧑‍💻 Author

Latest Editor

![@matt-baillie]
@matt-baillie

Original Author

![@cicciosgamino]
@cicciosgamino

Support

Reach out to me at one of the following places:

Donate

Donate help and contibutions!

License

GNU General Public License v3.0

Made 🧑‍💻 by @cicciosgamino

Dependencies (2)

Dev Dependencies (1)

Package Sidebar

Install

npm i @matt-baillie/github-button

Weekly Downloads

0

Version

1.1.18

License

GPL-3.0

Unpacked Size

46 kB

Total Files

6

Last publish

Collaborators

  • matt-baillie