A button web component, with a visual "loading" state.
npm i -S @substrate-system/buttonDepends 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;
}This exposes ESM and common JS via package.json exports field.
import { SubstrateButton } from '@substrate-system/button'const { SubstrateButton } = require('@substrate-system/button')Import CSS with a bundler, like esbuild.
import '@substrate-system/button/css'Or minified:
import '@substrate-system/button/css/min'Or use CSS imports:
@import url("../node_modules/@substrate-system/button/dist/index.min.css");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'
import '@substrate-system/button/css'
// 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()This package includes ESM, Common JS, and pre-bundled versions.
Just import like normal.
This is a web component that knows how to render itself.
import { SubstrateButton } from '@substrate-system/button'
SubstrateButton.define()The client version should be used in conjunction with server-side rendering. It does not know how to render itself.
import { SubstrateButton } from '@substrate-system/button/client'
SubstrateButton.define()Take some attributes, and return a string of HTML.
import { html } from '@substrate-system/button/html'
const htmlString = html({
classes: ['abc'],
disabled: false,
autofocus: false
})This package exposes minified JS and CSS files. Copy them to a location that is accessible to your web server, then link to them in HTML.
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.css<head>
<link rel="stylesheet" href="./substrate-button.css">
</head>
<body>
<!-- ... -->
<script type="module" src="./substrate-button.min.js"></script>
</body>See the example in ./example.
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')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 // stop