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.
Follow these steps to successfully build out a button toggle component. Start by adding a
Optionally (but recommended), add a label attribute.
Next, lets add our toggle buttons. Add as many
<button> elements as you need with their value as the text inside.
All attributes in this API are optional.
|unset||Set or modify this attribute to trigger responsive behavior.|
|unset||Set or modify this attribute to determine which button appears selected.|
|Determines the text color of all non selected buttons.|
|unset||Determines the background color of all non selected buttons.|
|unset||Determines the text color of all selected buttons.|
|unset||Determines the background color of all selected buttons.|
pearson-button-toggle event changes based on the presence of the 'collapsed' attribute.
Listen for a 'click' event when collapsed is false.
Listen for a 'change' event when collapsed is true.
Do you prefer to use HTML instead of a web component? No problem, use the markup below.