simple-button
Drop in upgrade for HTML's <button> element, built on Web Components
[ This description is mirrored from README.md at github.com/SimpleElements/simple-button on 2019-05-22 ]
Simple Button
A lightweight, high quality, style-agnostic, form-friendly button component, built on Web Components. <simple-button> is a drop-in upgrade for HTML's <button> element.
<!-- Extremely lightweight -->
<simple-button>naked button</simple-button>
<!-- Easy to style -->
<simple-button class="fancy">fancy button</simple-button>
<!-- Comes with superpowers -->
<simple-button class="fancy" busy>working...</simple-button>
<style>
.fancy {
font-size: 14px;
color: white;
border-radius: 5px;
padding: 0.5em 1em;
background: rgb(76, 208, 204);
}
</style>
Contents
Features
- No default UI, style it however you like
- Works seamlessly as a submit button for forms
busystate that opens in-button spinner and disables user interactioniconproperty that displays an SVG icon definition
Installation & usage
Install simple-button with Bower
$ bower i SimpleElements/simple-button --save
Import it into the <head> of your page
<link rel="import" href="/bower_components/simple-button/simple-button.html">
Then use simple-button in your project
<simple-button>click me!</simple-button>
Polyfills for cross-browser support
simple-button relies on emerging standards, for full cross-browser support include the WebComponentsJS polyfill on your page.
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@^1.0.0/webcomponents-loader.js"></script>
Transpiling for IE11 support
Web Components like simple-button are distributed as ES6 classes, which are supported in all evergreen browsers. To support Internet Explorer 11 you should transpile simple-button to ES5 and use the webcomponentsjs custom-elements-es5-adapter.js shim.
The easiest way to do this is by including [polymer-build][polymer-build] in your buildstep of choice. Then just include the ES5 adapter on your page
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@^1.0.0/custom-elements-es5-adapter.js"></script>
Options
Simple-button adds several extra properties and behaviors compared to the standard <button> element.
| Property | Type | Default | Description |
|---|---|---|---|
icon |
String | '' |
SVG definition of an icon. Use [iron-icons][iron-icons], or define your own iconset with [iron-iconset-svg][iron-iconset-svg]. |
busy |
Boolean | false |
Set the busy state of the button. Shows a busy spinner when true. |
align |
String | 'left' |
Set the alignment of button icon and busy spinner. 'left' or 'right'. |
Properties can either be set as attributes on the element, or imperitively with Javascript
<simple-button align="left"></simple-button>
<script>
document.querySelector('simple-button').busy = true;
</script>
Styling
In addition to styling the button itself, you can style specific parts of simple-button with custom CSS properties
| Property | Default | Description |
|---|---|---|
--simple-button-icon-size |
1em |
Size of the button icon, defaults to 1em so you can use font-size |
Apply custom CSS props directly on simple-button
simple-button {
--simple-button-icon-size: 14px;
}
MIT © Sean King
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- polymer#^1.6.0
- iron-icon#^1.0.8
- Released
- 2017-08-21
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Polymer 1.0+
- Polymer 2.0+ in 1.0.0
- Browser
- Browser Independent