Summary
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.
Status
API status:
general
Web resource key:
com.atlassian.auiplugin:aui-button
AMD Module key:
require('aui/button')
Experimental API:
4.2
General API:
5.1
Standard button
Disabled
Primary Button
Disabled
Link button
Disabled
Dropdown button
Disabled
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.
Label only
Icon and label
Configure
Configure Subtle button
Disabled button
Disabled link button
Link button with icon and text
Link button with icon and text
Disabled link button with icon and text
Disabled link button with icon and text
Tool
Bar
Split button
Split More
Compact
More
deprecated
Light button
Do Something
Do Something
AJS.$(document).on('click', '#button-spin-1, #button-spin-2', function() {
var that = this;
if (!that.isBusy()) {
that.busy();
setTimeout(function() {
that.idle();
}, 2000);
}
});
The base button code is:
Button
You can then apply a button type by adding the appropriate class, for example aui-button-primary
:
Button
Standard/default - (no extra class)
Primary - aui-button-primary
Link-style (used for "cancel" actions) - aui-button-link
with icon and text - aui-button-link
aui-button-link-icon-text
Subtle (looks like a link while inactive, looks like a button when hovered/focused) - aui-button-subtle
Customising the state
The AUI button uses three CSS variables to control the colours used in a given state:
--aui-btn-bg
The button's background colour
--aui-btn-border
The button's border colour
--aui-btn-text
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.
/* let's make the subtle button very un-subtle... */
.my-custom-theme {
--aui-button-subtle-bg-color: #f0f;
--aui-button-subtle-text-color: #000;
}
/* these will only affect the button "at rest". */
.green-button {
--aui-btn-bg: #36B37E;
--aui-btn-text: #FFF;
--aui-btn-border: #006644;
}
/* override hover styles in the same way if you want to ;) */
.green-button:hover {
--aui-btn-bg: #FFF;
--aui-btn-text: #006644;
}
The forest is lovely this time of year!
Button states are applied using boolean ARIA attributes:
Button
Button
States:
Disabled: Buttons provides the disabled style but you still need to disable the events - aria-disabled="true"
.
Pressed: A pressed/enabled style for toggle buttons - aria-pressed="true"
Note: The style applies when the attribute is present and set to true.
Button groups
Create a button group by wrapping buttons in an aui-buttons
(note plural) DIV element:
Button
Button
Button
Split buttons
Require a wrapper and extra modifier classes; the second button should always be a Dropdown2 trigger:
Split main
Split more
Menu item 1
Menu item 2
Menu item 3
Read the Dropdown menu component documentation for more details on how to
control the rendering and behaviour of the dropdown menu.
Soy
Single button
{call aui.buttons.button}
{param text: 'Button'/}
{/call}
{call aui.buttons.button}
{param text: 'Primary Button'/}
{param type: 'primary'/}
{/call}
Dropdown 2 button
{call aui.buttons.button}
{param text: 'Dropdown button'/}
{param type: 'link'/}
{param dropdown2Target: 'dropdown2id'/}
{/call}
Icon button
{call aui.buttons.button}
{param text: ' Icon Button' /}
{param iconType: 'aui' /}
{param iconClass: 'aui-icon-small aui-iconfont-view' /}
{param iconText: 'View' /}
{/call}
Grouped buttons
{call aui.buttons.buttons}
{param content}
{call aui.buttons.button}{param text: 'Button'/}{/call}
{call aui.buttons.button}{param text: 'Button'/}{/call}
{call aui.buttons.button}{param text: 'Button'/}{/call}
{/param}
{/call}
Split buttons
{call aui.buttons.buttons}
{param content}
{call aui.buttons.splitButton}
{param splitButtonMain: [
'text': 'Split main'
] /}
{param splitButtonMore: [
'text': 'Split more',
'dropdown2Target': 'split-container-dropdown'
] /}
{/call}
{/param}
{/call}
Disabled buttons
{call aui.buttons.button}
{param text: 'Button'/}
{param isDisabled: 'true'/}
{/call}
Pressed buttons
{call aui.buttons.button}
{param text: 'Button'/}
{param isPressed: 'true'/}
{/call}
Link buttons with icon and text
{call aui.buttons.button}
{param text: 'Go back' /}
{param iconType: 'aui' /}
{param extraClasses: 'aui-button-link-icon-text' /}
{param iconClass: 'aui-icon-small aui-iconfont-chevron-left' /}
{param iconText: 'Go back' /}
{param type: 'link' /}
{/call}