Button Toggle

Installation

For detailed instructions, view our install section in this documentation. Make sure all of the dependencies and polyfills are loaded to make the component cross-browser compatible.

CDN

<script src="https://unpkg.com/@pearson-ux/button-toggle"></script>

NPM

npm i @pearson-ux/button-toggle --save

Demo

<pearson-button-toggle label="Toggle title">  <button>Value 1</button>  <button>Value 2</button>  <button>Value 3</button>  <button>Value 4</button></pearson-button-toggle>

Structure

Follow these steps to successfully build out a button toggle component. Start by adding a <pearson-button-toggle> element.

<pearson-button-toggle></pearson-button-toggle>

Optionally (but recommended), add a label attribute.

<pearson-button-toggle label="Toggle title"></pearson-button-toggle>

Next, lets add our toggle buttons. Add as many <button> elements as you need with their value as the text inside.

<pearson-button-toggle label="Toggle title">  <button>Value 1</button>  <button>Value 2</button>  <button>Value 3</button>  <button>Value 4</button></pearson-button-toggle>

API

Optional

All attributes in this API are optional.

Attribute	Type	Default	Description
collapsed	boolean	unset	Set or modify this attribute to trigger responsive behavior.
stage	number	unset	Set or modify this attribute to determine which button appears selected.
textcolor	Keyword, Hexadecimal, RGB, or HSL value	false	Determines the text color of all non selected buttons.
backgroundcolor	Keyword, Hexadecimal, RGB, or HSL value	unset	Determines the background color of all non selected buttons.
selectedtextcolor	Keyword, Hexadecimal, RGB, or HSL value	unset	Determines the text color of all selected buttons.
selectedcolor	Keyword, Hexadecimal, RGB, or HSL value	unset	Determines the background color of all selected buttons.

Events

The pearson-button-toggle event changes based on the presence of the 'collapsed' attribute.

Listen for a 'click' event when collapsed is false.

const toggle = document.querySelector('pearson-button-toggle')toggle.addEventListener('click',()=>{    console.log(toggle.value)})

Listen for a 'change' event when collapsed is true.

const toggle = document.querySelector('pearson-button-toggle')toggle.addEventListener('change',()=>{    console.log(toggle.value)})

HTML Markup

Do you prefer to use HTML instead of a web component? No problem, use the markup below.

  <div class="button-toggle-container">    <label class="gr-meta"></label>    <div class="container">       <button class="btn-toggle custom-style selected">Value 1</button>       <button class="btn-toggle custom-style">Value 2</button>       <button class="btn-toggle custom-style" selected="">Value 3</button>       <button class="btn-toggle custom-style">Value 4</button>    </div>  </div>