AUI Buttons

Markup notes

This page is not intended to demonstrate how to implement buttons correctly!

See the AUI docs for advice on correct implementation and pitfalls to avoid.

Interactive button variants

hyperlink as buttonanchor as buttonspan as button
Alter the button type
Alter the button variant
Alter the button icons
Alter the button state

Spinning buttons

Do SomethingDo Something

Free standing buttons




hyperlink as buttonanchor as buttonspan as button<height checks>


<input type="submit" />

<input type="button" />

ButtonPrimary ButtonLink ButtonText Button<a />

Disabled variants

Using aria-disabled="true":


<input type="submit" />

<input type="button" />

ButtonPrimary ButtonLink ButtonText Button<a />

Icon buttons:


Using the disabled attribute:


<input type="submit" />

<input type="button" />

Icon buttons:


Dropdown2 + Single Buttons:

While link buttons aren't recommended for dropdowns, they do get used.


ButtonPrimary ButtonLink Button<a />

Suppress old down-arrow pattern to avoid double arrows

Should only be one arrow on these:

Dropdown arrows not supported on INPUT elements or aui-button-text

Fof bulletproofing, the padding is simply set back to normal. But if you need a dropdown button, use A or BUTTON.

<input type="submit" />

<input type="button" />

Dropdown2 + Grouped Buttons

Wrap buttons in an element with class="aui-buttons" to make them form a lozenge (note: a full Toolbar2 is forthcoming).

Standard buttons

A Button

Icon-only Buttons

Simply combine Buttons with Icons. Dropdown arrows will be added separately where required.

Single buttons:


Icon font buttons

Testing icon font colours for disabled / enabled

Link Buttons

Testing underline for link button with icon

Subtle Buttons

Subtle aka "entity action buttons". They are stealthy. They look like a link. Then they are a button.

Light Buttons


Compact Buttons

Smaller than the average button.

Compact a Basic

Split Buttons

Split buttons are really two buttons that are related to each other. Wrap in aui-buttons and apply aui-button-split to the second button with the dropdown. In common toolbar layouts, dropdown alignment can be flipped by contraining to the buttons element with data-container.


Text Buttons

Text buttons take the style of the text around them, they have no extra padding so shouldn't increase the height of the line box.

Text button in <p>

Text button in <p style="font-size: 10px">

Text button in <h2>

Linked Button

Buttons with a href attribute function as expected. If a href="" attribute is given, then the button will link to "".

Empty String as LinkNormal Link