button - Vaadin Add-on Directory

Name: button
Availability: InStock
Rating: 5.0 (136 reviews)
Author: BrightspaceUI

Polymer-based web components for D2L buttons

**[ This description is mirrored from README.md at [github.com/BrightspaceUI/button](https://github.com//BrightspaceUI/button/blob/v5.4.2/README.md) on 2019-05-22 ]** # d2l-button [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/BrightspaceUI/button) [![Bower version][bower-image]][bower-url] [![Build status][ci-image]][ci-url] A series of [Polymer](https://www.polymer-project.org/1.0/)-based web components and [Sass](http://sass-lang.com/) mixins for D2L buttons. ![screenshot of button component](/screenshots/regular-buttons.png?raw=true) ![screenshot of subtle button component](/screenshots/subtle-buttons.png?raw=true) ![screenshot of icon button component](/screenshots/icon-buttons.png?raw=true) For further information on this and other components, refer to [The Brightspace UI Guide](https://github.com/BrightspaceUI/guide/wiki). ## Installation `d2l-button` can be installed from [Bower][bower-url]: ```shell bower install d2l-button ``` ## Usage Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyfill (for browsers who don't natively support web components), then import `d2l-button.html`: ### Button ```html ``` The `` element can be used just like the native `button` element, but also supports the `primary` attribute for denoting the primary button. Normal button: ![screenshot of normal buttons](/screenshots/button.png?raw=true) Primary button: ![screenshot of primary buttons](/screenshots/button-primary.png?raw=true) ```html Primary

Secondary

Disabled ``` As an alternative to the web component, a Sass mixin can be used to apply button styles to your button elements: ```sass @import 'bower_components/d2l-button/d2l-button.scss'; .my-button { @include d2l-button(); } ``` The `primary` and `disabled` attributes work the same way as they do with the web component. ### Subtle Button ```html ``` The subtle button shows text with an optional icon, and can be added by using the `` custom element. It should be used for advanced or de-emphasized actions. - It is strongly recommended to use `text` and `icon` as opposed to putting content in the `slot` to ensure that the recommended subtle button style is maintained. Without icon: ![screenshot of subtle buttons without icons](/screenshots/button-subtle.png?raw=true) With icon: ![screenshot of subtle buttons with icons](/screenshots/button-subtle-icons.png?raw=true) With icon on right: ![screenshot of subtle buttons with icon on the right](/screenshots/button-subtle-icons-right.png?raw=true) Alignment (bottom uses h-align="text") ![screenshot of subtle buttons with different alignments](/screenshots/button-subtle-align.png?raw=true) ```html

``` As an alternative to the web component, a Sass mixin can be used to apply button styles to your button elements: ```sass @import 'bower_components/d2l-button/d2l-button.scss'; .my-button { @include d2l-button-subtle(); } ``` Usage is slightly different in that the text and icon attributes are not used, and instead their content is added within the button. For example: ```html ``` ### Icon Button ```html ``` The icon button shows an icon with an aria-label, and can be added by using the `` custom element. It should be used when icons perform a clickable action. ![screenshot of icon buttons](/screenshots/button-icon.png?raw=true) Alignment (bottom uses h-align="text") ![screenshot of icon buttons with different alignments](/screenshots/button-icon-align.png?raw=true) Translucent (for use on rich/busy backgrounds, specify the `translucent` attribute) ![screenshot of icon buttons with different alignments](/screenshots/button-icon-translucent.png?raw=true) ```html

``` As an alternative to the web component, a Sass mixin can be used to apply button styles to your button elements: ```sass @import 'bower_components/d2l-button/d2l-button.scss'; .my-button-icon { @include d2l-button-icon(); } ``` Usage is slightly different in that the text and icon attributes are not used. Instead, the icon is added within the button and the aria-label is added as a button attribute. For example: ```html ``` ### Floating Workflow Buttons Floating workflow buttons behavior can be added by using the `` custom element. When the normal position of the workflow buttons is below the bottom edge of the view-port, they'll dock at the bottom edge. When the normal position becomes visible, they'll undock. ![screenshot of floating buttons](/screenshots/floating-buttons.png?raw=true) ```html ``` Include the `` container at the bottom of the page, and add your workflow `button` elements: ```html

Save

Cancel

``` ## Developing, Testing and Contributing After cloning the repo, run `npm install` to install dependencies. If you don't have it already, install the [Polymer CLI](https://www.polymer-project.org/2.0/docs/tools/polymer-cli) globally: ```shell npm install -g polymer-cli ``` To start a [local web server](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#serve) that hosts the demo page and tests: ```shell polymer serve ``` To lint ([eslint](http://eslint.org/) and [Polymer lint](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#lint)): ```shell npm run lint ``` To run unit tests locally using [Polymer test](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#tests): ```shell polymer test --skip-plugin sauce ``` To lint AND run local unit tests: ```shell npm test ``` [bower-url]: http://bower.io/search/?q=d2l-button [bower-image]: https://badge.fury.io/bo/d2l-button.svg [ci-url]: https://travis-ci.org/BrightspaceUI/button [ci-image]: https://travis-ci.org/BrightspaceUI/button.svg?branch=master ## Versioning Commits and PR merges to master will automatically do a minor version bump which will: * Update the version in `package.json` * Add a tag matching the new version * Create a github release matching the new version By using either **[increment major]** or **[increment patch]** notation inside your merge message, you can overwrite the default version upgrade of minor to the position of your choice.

GitHub Homepage
Issue tracker
View on GitHub
Documentation
Online Demo

button version 0.7.1
### Dependencies * vui-gradient#~0.3.0

button version 0.7.2
### Dependencies * vui-gradient#~0.3.0

button version 0.7.3
### Dependencies * vui-gradient#~0.3.1

button version 0.7.4
### Dependencies * vui-gradient#~0.3.1

button version 0.7.5
### Dependencies * vui-gradient#~0.3.2

button version 1.0.0
### Dependencies * vui-colors#^0.1.0 * vui-typography#^1.0.11

button version 1.0.1
### Dependencies * vui-colors#^0.1.0 * vui-typography#^1.0.11

button version 1.0.2
### Dependencies * vui-colors#^0.1.0 * vui-typography#^1.0.11

button version 1.0.3
### Dependencies * vui-colors#^0.1.0 * vui-typography#^1.0.11

button version 1.0.4
### Dependencies * vui-colors#^0.1.0 * vui-typography#^1.0.11

button version 1.0.5
### Dependencies * vui-colors#^0.1.0 * vui-typography#^1.0.11

button version 1.1.0
### Dependencies * vui-colors#^0.2.0 * vui-typography#^1.2.0

button version 1.2.0
### Dependencies * vui-colors#^0.2.0 * vui-typography#^2.0.0

button version 1.2.1
### Dependencies * vui-colors#^0.2.0 * vui-typography#^2.0.0

button version 2.0.0
### Dependencies * polymer#^1.3.1 * vui-colors#^1.0.1

button version 2.1.0
### Dependencies * polymer#^1.3.1 * vui-colors#^1.0.1

button version 2.1.1
### Dependencies * polymer#^1.3.1 * vui-colors#^1.0.1

button version 2.1.2
### Dependencies * polymer#^1.3.1 * vui-colors#^1.0.1

button version 2.1.3
### Dependencies * polymer#^1.3.1 * vui-colors#^1.0.1

button version 2.1.4
### Dependencies * polymer#^1.3.1 * vui-colors#^1.0.1

button version 3.0.0
### Dependencies * d2l-colors#~2.0.0 * polymer#~1.5.0

button version 3.0.1
### Dependencies * d2l-colors#^2.0.0 * polymer#^1.5.0

button version 3.0.2
### Dependencies * d2l-colors#^2.0.0 * polymer#^1.5.0

button version 3.0.3
### Dependencies * d2l-colors#^2.0.0 * polymer#^1.5.0 * iron-media-query#^1.0.8

button version 3.0.4
### Dependencies * d2l-colors#^2.0.0 * polymer#^1.5.0 * iron-media-query#^1.0.8

button version 3.0.5
### Dependencies * d2l-colors#^2.0.0 * polymer#^1.5.0 * iron-media-query#^1.0.8

button version 3.0.6
### Dependencies * d2l-colors#^2.0.0 * polymer#^1.5.0 * iron-media-query#^1.0.8

button version 3.0.7
### Dependencies * d2l-colors#^2.2.2 * polymer#^1.7.0 * iron-media-query#^1.0.8

button version 3.0.8
### Dependencies * d2l-colors#^2.2.3 * polymer#^1.7.0 * iron-media-query#^1.0.8

button version 3.0.9
### Dependencies * d2l-colors#^2.2.3 * polymer#^1.7.0 * iron-media-query#^1.0.8

button version 3.0.10
### Dependencies * d2l-colors#^2.2.3 * polymer#^1.7.0 * iron-media-query#^1.0.8

button version 3.1.0
### Dependencies * d2l-colors#^2.2.3 * polymer#^1.7.0 * iron-media-query#^1.0.8

button version 3.2.0
### Dependencies * d2l-colors#^2.2.3 * polymer#^1.7.0 * iron-media-query#^1.0.8

button version 3.3.0
### Dependencies * d2l-colors#^2.2.3 * polymer#^1.7.0 * iron-media-query#^1.0.8

button version 3.3.1
### Dependencies * d2l-colors#^2.4.0 * polymer#^1.9.0 * iron-media-query#^1.0.8

button version 4.0.0
### Dependencies * d2l-colors#2.4.0 - 3 * polymer#1 - 2 * iron-media-query#1 - 2

button version 4.0.1
### Dependencies * d2l-colors#2.4.0 - 3 * polymer#1 - 2 * iron-media-query#1 - 2

button version 4.0.2
### Dependencies * d2l-colors#^3.1.2 * polymer#1 - 2 * iron-media-query#1 - 2

button version 4.0.3
### Dependencies * d2l-colors#^3.1.2 * d2l-polymer-behaviors#^1.3.0 * iron-media-query#^2.0.0 * polymer#1 - 2

button version 4.1.0
### Dependencies * d2l-colors#^3.1.2 * d2l-icons#^4.12.1 * d2l-polymer-behaviors#^1.3.0 * d2l-typography#^6.1.3 * iron-media-query#^2.0.0 * polymer#1 - 2

button version 4.2.0
### Dependencies * d2l-colors#^3.1.2 * d2l-icons#^4.12.1 * d2l-polymer-behaviors#^1.3.0 * d2l-typography#^6.1.3 * iron-media-query#^2.0.0 * polymer#1 - 2

button version 4.2.1
### Dependencies * d2l-colors#^3.1.2 * d2l-icons#^4.12.1 * d2l-polymer-behaviors#^1.3.0 * d2l-typography#^6.1.3 * iron-media-query#^2.0.0 * polymer#1 - 2

button version 4.3.0
### Dependencies * d2l-colors#^3.1.2 * d2l-icons#^4.12.1 * d2l-polymer-behaviors#^1.3.0 * d2l-typography#^6.1.3 * iron-media-query#^2.0.0 * polymer#1 - 2

button version 4.4.0
### Dependencies * d2l-colors#^3.1.2 * d2l-icons#^4.12.1 * d2l-polymer-behaviors#^1.3.0 * d2l-typography#^6.1.3 * iron-media-query#^2.0.0 * polymer#1 - 2

button version 4.4.1
### Dependencies * d2l-colors#^3.1.2 * d2l-icons#^4.12.1 * d2l-polymer-behaviors#^1.3.0 * d2l-typography#^6.1.3 * iron-media-query#^2.0.0 * polymer#1 - 2

button version 4.4.2
### Dependencies * d2l-colors#^3.1.2 * d2l-icons#^4.12.1 * d2l-polymer-behaviors#^1.3.0 * d2l-typography#^6.1.3 * iron-media-query#^2.0.0 * polymer#1 - 2

button version 4.5.0
### Dependencies * d2l-colors#^3.1.2 * d2l-icons#^5.0.0 * d2l-polymer-behaviors#^1.3.0 * d2l-typography#^6.1.3 * iron-media-query#^2.0.0 * polymer#1 - 2

button version 4.5.1
### Dependencies * d2l-colors#^3.1.2 * d2l-icons#^5.0.0 * d2l-polymer-behaviors#^1.3.0 * d2l-typography#^6.1.3 * iron-media-query#^2.0.0 * polymer#1 - 2

button version 4.6.0
### Dependencies * d2l-colors#^3.1.2 * d2l-icons#^5.0.0 * d2l-polymer-behaviors#^1.3.0 * d2l-typography#^6.1.3 * iron-media-query#^2.0.0 * polymer#1 - 2

button version 4.7.0
### Dependencies * d2l-colors#^3.1.2 * d2l-icons#^5.0.0 * d2l-polymer-behaviors#^1.7.0 * d2l-typography#^6.1.3 * iron-media-query#^2.0.0 * polymer#1 - 2

button version 4.7.1
### Dependencies * d2l-colors#^3.1.2 * d2l-icons#^5.0.0 * d2l-polymer-behaviors#^1.7.1 * d2l-typography#^6.1.3 * iron-media-query#^2.0.0 * polymer#1 - 2

button version 4.7.2
### Dependencies * d2l-colors#^3.1.2 * d2l-icons#^5.0.0 * d2l-polymer-behaviors#^1.7.2 * d2l-typography#^6.1.3 * iron-media-query#^2.0.0 * polymer#1 - 2

button version 4.7.3
### Dependencies * d2l-colors#^3.1.2 * d2l-icons#^5.0.0 * d2l-polymer-behaviors#^1.7.3 * d2l-typography#^6.1.3 * iron-media-query#^2.0.0 * polymer#1 - 2

button version 4.7.4
### Dependencies * d2l-colors#^3.1.2 * d2l-icons#^5.0.0 * d2l-polymer-behaviors#^1.7.3 * d2l-typography#^6.1.3 * iron-media-query#^2.0.0 * polymer#1 - 2

button version 4.7.5
### Dependencies * d2l-colors#^3.1.2 * d2l-icons#^5.0.0 * d2l-polymer-behaviors#^1.7.3 * d2l-typography#^6.1.3 * iron-media-query#^2.0.0 * polymer#1 - 2

button version 4.8.0
### Dependencies * d2l-colors#^3.1.2 * d2l-icons#^5.0.0 * d2l-polymer-behaviors#^1.7.3 * d2l-typography#^6.1.3 * iron-media-query#^2.0.0 * polymer#1 - 2

button version 4.9.0
### Dependencies * d2l-colors#^3.1.2 * d2l-icons#^5.0.0 * d2l-polymer-behaviors#^1.7.3 * d2l-typography#^6.1.3 * iron-media-query#^2.0.0 * polymer#1 - 2

button version 4.10.0
### Dependencies * d2l-colors#^3.1.2 * d2l-icons#^5.0.0 * d2l-polymer-behaviors#^1.7.3 * d2l-typography#^6.1.3 * iron-media-query#^2.0.0 * polymer#1 - 2

button version 4.10.1
### Dependencies * d2l-colors#^3.1.2 * d2l-icons#^5.0.0 * d2l-polymer-behaviors#^1.7.3 * d2l-typography#^6.1.3 * iron-media-query#^2.0.0 * polymer#1 - 2

button version 4.10.2
### Dependencies * d2l-colors#^3.1.2 * d2l-icons#^5.0.0 * d2l-polymer-behaviors#^1.7.3 * d2l-typography#^6.1.3 * iron-media-query#^2.0.0 * polymer#1 - 2