A button that and flips between different options.

Usage no npm install needed!

<script type="module">
  import catalystElementsCatalystFlipButton from 'https://cdn.skypack.dev/@catalyst-elements/catalyst-flip-button';



Travis David David Published on webcomponents.org npm (scoped) Bower not supported Polymer 2 not supported Polymer 3 support pending

Live Demo ↗ | API documentation ↗

<catalyst-flip-button> is a wrapper for a select element. It displays as a button and flips between different options. It is part of the Catalyst Elements Collection.

Also see catalyst-toggle-button.

Example Usage



Install with npm:

npm install --save @catalyst-elements/catalyst-flip-button

Install with yarn:

yarn add @catalyst-elements/catalyst-flip-button

Please note that this package is not compatible with Bower.


As a Module (Recommend)

Import the module on each page that uses the component.

<script type="module" src="node_modules/@catalyst-elements/catalyst-flip-button/catalyst-flip-button.js"></script>

Then simply use it like any other tag.

As a Script

Import the script for the component on each page that it is uses on.

<script src="node_modules/@catalyst-elements/catalyst-flip-button/catalyst-flip-button.es5.min.js"></script>

Please note that this script has been transpiled to es5 and thus use of custom-elements-es5-adapter.js or an equivalent library is required. See es5 support on the Catalyst Elements wiki for details.

The element can then be use it like any other tag.

Browser Compatibility

See details on the Catalyst Elements' wiki: Browser Compatibility


Contributions are most welcome.

Please read our contribution guidelines.