Awesome valle-mixinButton for Polymer 3 elements.

Usage no npm install needed!

<script type="module">
  import valleValleMixinbutton from 'https://cdn.skypack.dev/@valle/valle-mixinbutton';



Awesome valle-mixinButton for Polymer 3 elements


What is?

A class expression mixin is basically a function that operates as a class factory. You pass in a superclass, and the function generates a new class that extends the superclass with the mixin's methods.

See polymer mixins docs.

or only...

Allows to share behaviors (like methods and properties) between different elements.

Basic usage

How to install and use:

1 - Install the element using Yarn:

$ yarn add @valle/valle-mixinButton

2 - Import the element:

<script type="module" src="node_modules/@valle/valle-mixinButton/valle-mixinButton.js"></script>

or in your javascript file

import { valleMixinButton } from '@valle/valle-mixinButton/valle-mixinButton.js';

3 - Start using it!

class myButton extends valleMixinButton(PolymerElement) {

Full Example:

import { valleMixinButton } from '../../valle-mixinButton.js';
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';

class myButton extends valleMixinButton(PolymerElement) {
  static get template() {
    return html`

window.customElements.define('my-button', myButton);


All behaviors of a normal button plus the characteristics of a toggle button.

  • Set all necessary aria attributes (ex: role = "button"), and controls all states changes (aria-pressed and aria-disabled).
  • Control when the button should receive focus or not via tabIndex.
  • Control pointer-events CSS state when necessary.
  • Add keyboard (SPACE and ENTER) power for dispatch actions.

Properties provided

Property Type Default Description
disabled Boolean false Allow disabled state
toggle Boolean false Allow toggle mode
pressed Boolean false Set the pressed state (toggled)

View all methods, listeners, properties, etc...

Browser Support

Using the webcomponents.js:

Chrome Opera Firefox Safari IE Edge
Latest ✔ Latest ✔ Latest ✔ Latest ✔ 11+ Latest ✔


1 - Verify if you have node and yarn installed.

2 - Install Polymer-CLI:

$ [sudo] yarn global add polymer-cli

3 - Install local dependencies:

$ yarn

4 - Start the development server:

$ yarn start


To keep better organization of releases we follow the Semantic Versioning 2.0.0 guidelines.


Find on our issues the next steps of the project ;)
Want to contribute? Follow these recommendations.


See Releases for detailed changelog.


MIT License © valleweb