Buttons are used as triggers for actions. They are used in forms, toolbars, dialog footers and as stand-alone action triggers. Buttons should rarely, if ever, be used for navigation.
Actions are operations that are performed on objects.
Navigation changes the screen or view or takes you to another context in the application.
Status
API status:
general
Included in AUI core?
Yes. You do not need to explicitly require the web resource key.
You can then apply a button type by adding the appropriate class, for example aui-button-primary:
Button types and classes:
Standard/default - (no extra class)
Primary - aui-button-primary
Link-style (used for "cancel" actions) - aui-button-cancel
Subtle (looks like a link while inactive, looks like a button when hovered/focused) - aui-button-subtle
Split (has a primary and secondary area within one button)
Button states are applied using boolean ARIA attributes:
Button states:
Disabled (Buttons provides the disabled style but you still need to disable any events, etc) - aria-disabled="true".
Pressed (a pressed/enabled style for toggle buttons) - - aria-pressed="true"
Note the style will apply when the attribute is present and set to true.
Button groups are created by wrapping buttons in an aui-buttons (note plural) DIV element:
Split buttons require a wrapper and extra modifier classes; the second button should be a Dropdown2 trigger:
Note you can use Dropdown2's data-container feature to force the dropdown to extend right to left, setting the container with an ID on the aui-buttons element.