<div class='intro'>

<p>{{description}}</p>

</div>

<h2>Anatomy of Button</h2>

<p>YUI's Button component introduces 5 modules:</p>

<ul>

<li>`cssbutton` - Imports various `yui3-button` styles to provide a normalized css base for your buttons.</li>

<li>`button` - Exports the `Y.Button` &amp; `Y.ToggleButton` widgets.</li>

<li>`button-group` - Exports the `Y.ButtonGroup` widget.</li>

<li>`button-core`</li>

<li>`button-plugin` - Exports the `Y.Plugin.Button.createNode` factory.</li>

</ul>

<h2>Which one to use?</h2>

<ul>

<li>`use('button')` if you want a button (widget)</li>

<li>`use('button-group')` if you want to manage a group of buttons (widget)</li>

<li>`use('cssbutton')` if you only want css-styled buttons</li>

<li>`use('button-plugin')` if you only need a Y.Node-based button to do things like; @TODO</li>

</ul>

<h3>Benefits</h3>

<p>So what do you get from Y.Button over just creating your own button node, via something like `new Y.Node.create('<button></button>')`</p>

<ul>

<li><strong>Accessibility</strong> - Your buttons automatically create and manage their own ARIA <a href='http://www.w3.org/TR/wai-aria/states_and_properties'>states</a> &amp; <a href='http://www.w3.org/TR/wai-aria/roles'>roles</a>. This includes states like `aria-pressed` &amp; `aria-checked`, also appropriate roles like `button`, `checked`, `radio`, etc...</li>

<li><strong>State management</strong> - Y.Button instances automatically apply classes, such as `yui3-button-selected` and `yui3-button-disabled` which are useful for styling purposes. Also, Y.ToggleButton will fire a 'pressedChange' or 'pressedChange' (depending on `type`) event only when the button state changes from selected to unselected, or vice-versa, eliminating the typical case of listening for 'click' and then checking to see if the state changed.</li>

<li><strong>Groups</strong> - `Y.ButtonGroup` allows you to group buttons together to create checkbox &amp; radio groups, giving your users a nicer experience when compared to the standard radio or checkbox controls.</li>

</ul>