Use buttons as triggers for actions that are used in forms, toolbars, dialog footers and as stand-alone action triggers. Try to avoid the usage of buttons for navigation. The main difference between actions and navigation is that Actions are operations performed on objects, while Navigation refers to elements on the screen or view that take you to another context in the application.
|Web resource key:||
|AMD Module key:||
These variations can be used against all button types. For button groups on your page, only choose one type of variation, do not mix them.
The base button code is:
You can then apply a button type by adding the appropriate class, for example
Button types and classes
- Standard/default - (no extra class)
- Primary -
- Link-style (used for "cancel" actions) -
- Subtle (looks like a link while inactive, looks like a button when hovered/focused) -
Customising the state
The AUI button uses three CSS variables to control the colours used in a given state:
- The button's background colour
- The button's border colour
- The button's text colour
In addition, the AUI theme defines CSS variables on the :root element for each button type's base and pseudo-states.
Button states are applied using boolean ARIA attributes:
- Disabled: Buttons provides the disabled style but you still need to disable the events -
- Pressed: A pressed/enabled style for toggle buttons -
Note: The style applies when the attribute is present and set to true.
Create a button group by wrapping buttons in an
aui-buttons (note plural) DIV element:
Require a wrapper and extra modifier classes; the second button should always be a Dropdown2 trigger:
Read the Dropdown menu component documentation for more details on how to control the rendering and behaviour of the dropdown menu.