Button

A plain button

Table of contents

Installation

CDN

  <script type='module' src="http://developer.powerpeers.com/social/1.0.0/custom-button.js" />

NPM

  npm i @ppci/custom-button

Usage

// Javascript import
import '@ppci/custom-button'

<!-- or module import -->
<script type="module" src="http://developer.powerpeers.com/social/1.0.0/custom-button.js" />

const onClick = (event) => {
  // place click logic here
}

<custom-button
  name="firstname"
  loading
  theme-powerpeers
  @click=${onClick}>
</custom-button>

Theme | Styling

We have a predefined powerpeers theme ready for you! Just add the theme-powerpeers boolean attribute to your custom-button.

<custom-button
  theme-powerpeers>
</custom-button>

Not completely satisfied with our powerpeers theme? Well you can do it yourself. We have a set of css variables available for you.

custom-button {
  --background-color: white;
  --color: gray;
  --theme-spacing: 16px;
  --border-radius: 0px;
  --border: 1px solid silver;

  --hover-background-color: gray;
  --hover-color: black;
  --hover-border: black;
}

Properties

Events

Changelog

1.0.0 ( Major )

• Initial version of the custom button.