Button States


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.


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.


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


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.


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>
	window.addEvent('domready', function() {
		$('disable').addEvent('change', function(){
			var largeButton = $('largeButton');
			if (largeButton.getData('state').contains('disabled')){
			} else {
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>
Want to continue the tour?

VM UI Framework is created, owned, maintained by Virtuosi Media, Inc. © 2012-2013.