Drop in upgrade for HTML's element, built on Web Components

[ This description is mirrored from README.md at github.com/SimpleElements/simple-button on 2019-05-22 ]

Simple Button

Build status Size Version Published

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
  • busy state that opens in-button spinner and disables user interaction
  • icon property 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

Install

Link to this version
ImportedReleased 23 August 2017MIT License
Framework Support
Polymer 2.0+
Also supported:
Polymer 1 (0.2.4)
Browser Compatibility
Install with
bower install --save SimpleElements/simple-button"#1.0.1"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.0.1

Dependencies

  • polymer#^2.0.0
  • iron-icon#^2.0.1