@substrate-system/button v0.0.17
button
A button web component, with a visual "loading" state.
Install
npm i -S @substrate-system/buttonDependencies
Depends on these CSS variables, which are exposed in the @substrate-system/css package.
:root {
--substrate-medium: #999da0;
--substrate-button-text: #36393d;
--substrate-primary: #36393d;
--substrate-font: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
--substrate-button-background: #f5f5f5;
--substrate-button-shadow: #00000054;
--substrate-button-background-focus: #ededed;
--substrate-button-background-hover: #e6e6e6;
}API
This exposes ESM and common JS via package.json exports field.
ESM
import { SubstrateButton } from '@substrate-system/button'Common JS
const { SubstrateButton } = require('@substrate-system/button')CSS
Bundler
Import CSS with a bundler, like esbuild.
import '@substrate-system/button/css'Or minified:
import '@substrate-system/button/css/min'CSS import
Or use CSS imports:
@import url("../node_modules/@substrate-system/button/dist/index.min.css");Use
You can set a name for this custom element with the static method
define. To use the default name, substrate-button, just import and
call .define().
!CAUTION
If you change the name of the web component, it will break the CSS.
To use the default, call .define():
import { SubstrateButton } from '@substrate-system/button'
// create a web component named `substrate-button`
SubstrateButton.define()Or override the tag property to change the tag name:
import { SubstrateButton } from '@substrate-system/button'
// set a custom name
SubstrateButton.tag = 'cool-button'
SubstrateButton.define()Example
See the example in ./example.
Attributes
spinning
Add an attribute spinning to set the loading state.
const el = document.querySelector('substrate-button')
el?.setAttribute('spinning', '')
// now it shows a spinning animationRemove the attribute to stop the animation:
const el = document.querySelector('substrate-button')
el?.removeAttribute('spinning')JS API
Or, if you have a reference to the element, you can set the spinning property
for the same effect:
const el = document.querySelector('substrate-button')
el.spinning = true // spin
el.spinning = false // stopHTML
<div>
<substrate-button>hello</substrate-button>
</div>pre-built
This package exposes minified JS and CSS files too. Copy them to a location that is accessible to your web server, then link to them in HTML.
copy
cp ./node_modules/@substrate-system/button/dist/index.min.js ./public/substrate-button.min.js
cp ./node_modules/@substrate-system/button/dist/index.min.css ./public/substrate-button.cssHTML
<head>
<link rel="stylesheet" href="./substrate-button.css">
</head>
<body>
<!-- ... -->
<script type="module" src="./substrate-button.min.js"></script>
</body>