Buttons

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

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.

deprecated

Busy buttons

<button class="aui-button" id="button-spin-1">Do Something</button>

<button class="aui-button aui-button-primary" id="button-spin-2">Do Something</button>

AJS.$(document).on('click', '#button-spin-1, #button-spin-2', function() {

    var that = this;

    if (!that.isBusy()) {

        that.busy();

​

        setTimeout(function() {

            that.idle();

        }, 2000);

    }

});

Code

HTML

The base button code is:

<button class="aui-button">Button</button>

You can then apply a button type by adding the appropriate class, for example aui-button-primary:

<button class="aui-button aui-button-primary">Button</button>

Button types and classes

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

}

<button class="aui-button green-button">

    The forest is lovely this time of year!

</button>

Button states

Button states are applied using boolean ARIA attributes:

<button class="aui-button" aria-disabled="true" disabled>Button</button>

<button class="aui-button" aria-pressed="true">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:

<div class="aui-buttons">

    <button class="aui-button">Button</button>

    <button class="aui-button">Button</button>

    <button class="aui-button">Button</button>

</div>

Split buttons

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

<div class="aui-buttons">

    <button class="aui-button aui-button-split-main">Split main</button>

    <button class="aui-button aui-dropdown2-trigger aui-button-split-more" aria-controls="split-container-dropdown">Split more</button>

</div>

<!-- Be sure to put your dropdown markup outside the button group...

     otherwise the buttons will get jaggy edges! -->

<aui-dropdown-menu id="split-container-dropdown">

    <aui-item-link>Menu item 1</aui-item-link>

    <aui-item-link>Menu item 2</aui-item-link>

    <aui-item-link>Menu item 3</aui-item-link>

</aui-dropdown-menu>

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}

A11Y guidelines

Side note: whether you'd follow these guidelines or not, it's always advised to at least test your markup with a screen reader software.

• Avoid using other HTML tags than button or input if possible.
  • If you're creating a custom button (again! not advised!) ensure role="button", tabindex="0", and all expected keyboard support is present.
• When using icons inside buttons
  • Make sure the icon has aria-hidden="true" applied to it.
  • Don't add additional text into the icon's span.
  • If this is an icon-only button, please add aria-label attribute to the button, provide descriptive and unique text.
• In case of multiple buttons with similar purpose on a page (e.g. "edit" button on each item in a list), specify descriptive text (e.g. "Edit Profile 1”) via the aria-label or aria-labelledby attributes to make the detailed information available for screen reader users.
  Examples:
  <button class="aui-button aui-button-primary" aria-label="Edit Profile 1">Edit</button>

   

  <button class="aui-button aui-button-primary" aria-label="Edit Profile 1">Edit</button>
  <span id="prof_1">Profile 1</span> <span>/* ... some ... */</span> <span>/* ... other ... */</span> <span>/* ... elements ... */</span> <button class="aui-button" id="edit_1" aria-labelledby="edit_1 prof_1"> <span class="aui-icon aui-icon-small aui-iconfont-configure"></span> Configure </button>

   

  <span id="prof_1">Profile 1</span>

  <span>/* ... some ... */</span>

  <span>/* ... other ... */</span>

  <span>/* ... elements ... */</span>

  <button class="aui-button" id="edit_1" aria-labelledby="edit_1 prof_1">

      <span class="aui-icon aui-icon-small aui-iconfont-configure"></span> Configure

  </button>