Skip to main content

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.

AttributeTypeDefaultDescription
collapsedbooleanunsetSet or modify this attribute to trigger responsive behavior.
stagenumberunsetSet or modify this attribute to determine which button appears selected.
textcolorKeyword, Hexadecimal, RGB, or HSL valuefalseDetermines the text color of all non selected buttons.
backgroundcolorKeyword, Hexadecimal, RGB, or HSL valueunsetDetermines the background color of all non selected buttons.
selectedtextcolorKeyword, Hexadecimal, RGB, or HSL valueunsetDetermines the text color of all selected buttons.
selectedcolorKeyword, Hexadecimal, RGB, or HSL valueunsetDetermines 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>