All-in

Avatars

Badges

Small pieces of extra information within components like Navigation, eg. a count:

1 2 3 4 5 6 7

Buttons

AUI Buttons cover combinations of free standing, grouped, disabled and toggled buttons:

Sets of grouped buttons can be contained in Toolbar2 for a complete toolbar.

Date Picker

A simple date picker polyfill for browsers that don't support date fields.

Dialogs

Dropdown2

Shipmates

The Crimson Short One

Red Dwarf
Low Red Dwarf
High Red Dwarf
Nanobot Red Dwarf

Support Ships

Starbug
Blue Midget
White Giant

Other Ships

Wildfire
SSS Esperanto
Nova 5

Transitions

Option 1
Option 2
Option 3

Check Spelling While Typing
Enable Gravity

Icon span pattern

Expander experimental api

Content title

What happens when you add a shiny new browser to a stack of already-disagreeing citizens? You’ll inevitably find some bugs. This is the story of how we found a rendering quirk and how the Atlassian frontend team found and refined the fix. The Problem The Atlassian User Interface (AUI) library has just finished an IE10 sprint to get our library prepped and ready for the newest member of the browser family. While IE10 seems generally quite good, we found a couple of problems due to IE10 dropping conditional comments; plus some undesirable behaviours. Show more

Forms

Available in several flavours including compact top-label style, long-label and short-label:

Icons

For the full set of icons and sizes, refer to the docs.

Global vector icons:

View Configure Add Help Search Success Workbox Workbox (full) Email App Switcher Edit User Comment Add Comment Search Remove Close Remove Label Time Error Info Approve Build JIRA Doc Star Unstar Watch Unwatch List view Card view Table view RSS Expanded Collapsed Flag Confluence Attachment Calendar Details Arrows up Arrows down Link Locked Unlocked More Quote Warning

Dev tools vector icons:

Folder closed Folder open File File binary Branch Repository Repository forked Repository private Commit Pull request Tag Tag Browse up Clone Fork Submodule Arrow right Arrow left Task in progress Task cancelled Task disabled Branch (small) Commented file Compare Checkout Side-by-side diff

JIRA icons:

Completed task Test session

Vector icons also available in large:

View Configure Add

Other icons:

Wait Close Close Generic Error Info Warning Success

Dev tools

Folder closed Folder open File File binary Branch Repository Repository forked Repository private Commit Pull request Tag Browse up Clone Fork Submodule Arrow right Arrow left Task in progress Task cancelled Task disabled Branch (small) Commented file

You should adjust the alternative text (the text inside the SPAN element) to suit the meaning and usability of your scenario. If you are using it in a button which has the button's action as visible text, you don't need to duplicate the text inside the icon too. However if you are creating an icon-only control, you should include the alternative text.

Inline dialog

If you don't need a full modal Dialog, you you can use an Inline Dialog.

Show inline dialog

Layout (Group + Item)

Borders and backgrounds added for demonstration purposes only - in production, no borders or backgrounds will be applied.

Evenly spaced item

Split group - first item aligned left.

Split group - second item aligned right.

Trio group - first item aligned left.

Trio group - second item aligned centre.

Trio group - third item aligned right.

Keyboard shortcuts

WhenIType allows you to trigger various events based on keyboard input.

Type "z" then "e" to execute some simple JavaScript.

Labels

AUI provides a CSS-only Label component - each product's implementation is expected to be different, so no default JS is provided.

unclickableUncloseableclickableclosableNoUrl(remove closableNoUrl)splitLabel(remove splitLabel)

Lozenges

Standard and Subtle variations:

default success error current new moved

Messages

Inserted with HTML

Backup stale

This instance was last backed up on Thursday, 18 September 2011.

Backing up attachments

Attachments will not be backed up. This needs to be done manually.

Destructive operation!

Data import will wipe all existing content - make sure you backup first!

Success!

You have backed up your system to C:/backups/filename.xml.

Backup stale

This instance was last backed up on Thursday, 18 September 2011.

Inserted with JS

Progress Tracker experimental api

Step One
Step Two
Step Three
Step Four
Step Five

AUI has a core set of navigation elements, which are most commonly used in horizontal and vertical navgroups.

Should be placed immediately before .aui-page-panel

Usually placed inside an .aui-page-panel-nav but will expand horizontally to fit any appropriate container element.

Pagination navigation

Used to show links between paginated content:

Page

Page Layouts

The AUI Page component sets up the whole-page layout, with several options:

Fluid (default)	Fixed	Hybrid	Focused Task

Content layouts

Within page layouts, there is a dedicated pattern for setting up the content's layout.

Content Only	Nav + Content	Content + Sidebar	Nav + Content + Sidebar

Page header