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
Included in AUI core? Yes. You do not need to explicitly require the web resource key.
Web resource key: com.atlassian.auiplugin:aui-buttons
AMD Module key: require('aui/button')
Experimental API: 4.2
General API: 5.1

Examples

Button types

Button variations

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.

Spinners in buttons

You can add a spinner to an AUI Button by setting the button's busy property to true.

Code

HTML

The base button code is:

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-link
  • 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

Button states are applied using boolean ARIA attributes:

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:

Split buttons

Require a wrapper and extra modifier classes; the second button should always be a Dropdown2 trigger:

Note: Use the Dropdown2's data-container feature to force the dropdown to extend right to left by setting the container with an ID on the aui-buttons element.

Soy

Single button

Dropdown 2 button

Icon button

Grouped buttons

Split buttons

Disabled buttons

Pressed buttons