Button States

Overview

Button states allow you to make a button more dynamic than just a link. Buttons with state can be active or inactive and enabled or disabled. You can add your own custom functionality to a button depending on the state.

Usage

To differentiate dynamic buttons from regular link buttons, add the date attribute data-state to the button. Most buttons won't require data-state to have a value as the buttons are inactive and enabled by default. If you would like to make a button active be default, just give data-state attribute a value of active. If you need to disable it by default, use the value disabled.

Options

Button Options
Option	Description	Required	Default	Values
`data-state`	The state of the button.	required	none	active\|disabled

Events

In order to add custom functionality to a button, add MooTools' event listeners to your button using one of the custom events below:

Button Events
Event	Description
`activated`	The activated event is fired for the button when it is clicked while in an inactive state.
`deactivated`	The deactivated event is fired for the button when it is clicked while in an active state.
`activate`	Fire the activate event to activate the button.
`deactivate`	Fire the deactivate event to deactivate the button.
`disable`	Fire the disable event to disable the button for the user.
`enable`	Fire the enable event to enable the button for the user.

Demos

A Single Button

This button can be toggled active or inactive and it can be enabled or disabled via the checkbox. If it is disabled, it will remember its previous state when re-enabled.

Toggle Me!

<p class="skipBottom"><a id="largeButton" class="largeButton" href="#" data-state="active">Toggle Me!</a></p>
<form class="bottomMargin">
	<label for="disable"><input type="checkbox" name="disable" id="disable"/> Disable Button</label>
</form>
<script>
	window.addEvent('domready', function() {
		$('disable').addEvent('change', function(){
			var largeButton = $('largeButton');
			if (largeButton.getData('state').contains('disabled')){
				largeButton.fireEvent('enable');
			} else {
				largeButton.fireEvent('disable');
			}
		});			
	});
</script>

A Button Group

Only the last button in this button group can be activated, the rest are just normal links.

<ul class="buttonGroup">
	<li><a href="#" class="mediumButton">Link</a></li>
	<li><a href="#" class="mediumButton">Link</a></li>
	<li><a href="#" class="mediumInfoButton" data-state>Toggle</a></li>
</ul>