Buttons

Summary

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

Examples

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-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 class="aui-button" aria-disabled="true" disabled>Button</button>

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

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:

<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 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-haspopup="true" aria-owns="split-container-dropdown">Split more</button>

    <div id="split-container-dropdown" class="aui-dropdown2 aui-style-default" data-container="split-button-demo"

    role="menu" aria-hidden="true">

        <ul class="aui-list-truncate">

            <li><a href="http://example.com/">Menu item 1</a></li>

            <li><a href="http://example.com/">Menu item 2</a></li>

            <li><a href="http://example.com/">Menu item 3</a></li>

        </ul>

    </div>

</div>

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.

Soy

Single buttons:

{call aui.buttons.button}

    {param text: 'Button'/}

{/call}

​

{call aui.buttons.button}

    {param text: 'Primary Button'/}

    {param type: 'primary'/}

{/call}

Dropdown2 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 button:

{call aui.buttons.button}

    {param text: 'Button'/}

    {param isDisabled: 'true'/}

{/call}

Pressed button:

{call aui.buttons.button}

    {param text: 'Button'/}

    {param isPressed: 'true'/}

{/call}