simple-button - Vaadin Add-on Directory
Drop in upgrade for HTML's element, built on Web Components
**[ This description is mirrored from README.md at [github.com/SimpleElements/simple-button](https://github.com//SimpleElements/simple-button/blob/v1.0.1/README.md) on 2019-05-22 ]**
# Simple Button
[![Build status][travis-badge]][travis-url] ![Size][size-badge] [![Version][tag-badge]][releases-url] [![Published][webcomponents-badge]][webcomponents-url]
A lightweight, high quality, style-agnostic, form-friendly button component, built on Web Components. `` is a drop-in upgrade for HTML's `` element.
```html
naked button
fancy button
working...
```
### Contents
- [Features](#features)
- [Installation & usage](#installation--usage)
- [Polyfills for cross-browser support](#polyfills-for-cross-browser-support)
- [Transpiling for IE11 support](#transpiling-for-ie11-support)
- [Options](#options)
- [Styling](#styling)
## 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
```sh
$ bower i SimpleElements/simple-button --save
```
Import it into the `` of your page
```html
click me!
```
### Polyfills for cross-browser support
simple-button relies on emerging standards, for full cross-browser support include the [WebComponentsJS](https://github.com/webcomponents/webcomponentsjs) polyfill on your page.
```html
```
### 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
```html
```
## Options
Simple-button adds several extra properties and behaviors compared to the standard `` 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
```html
Documentation Online Demo View on GitHub GitHub Homepage Issue tracker simple-button version 0.1.0
simple-button version 0.1.1
simple-button version 0.1.2
simple-button version 0.2.0
simple-button version 0.2.1
simple-button version 0.2.2
simple-button version 0.2.3
simple-button version 0.2.4
simple-button version 1.0.0
simple-button version 1.0.1
