Design Pattern: Actions

Actions are buttons. You press or select them, and they do something!

"Actions" is a very loose pattern, but it's normally a list of links. On most pages, there is an unordered actions list straight after the h2 page heading. Actions can show up anywhere, however, in any group, zone, region, or interaction.

The present actions style is declared in actions.css. They are a supertype.

Subtypes of "actions" (not discrete)

• navigation
  • landmark
  • skiplinks
  • current
• .pagination
• .sorting
• .action
• .submit
• input[type="submit"]
• .cancel
• .close
• .delete
• button

Rules (in this case really more guidelines)

Actions can be any element that contains one or more actions.

But if there's just a single action, it's not normally grouped, but just given an "action" class right on the button.

Secondary, nested, actions blocks have the class "secondary", which is a general modifier.

Try not to load verbose forms inside actions pattern.

actions XHTML Diagram (example)

1. <ul class="navigation actions" role="menu">
   1. <li>
      1. <a href="../">Back</a>
      </li>
   2. <li>
      1. <a href="../">Home</a>
      </li>
   3. <li>
      1. <a href="../" role="button">Save</a>
      </li>
   </ul>

Notes

Sometimes actions block are announced by a landmark heading. This is a case by case decision and must not be done reflexively, only where it is properly useful, like where there are lots of different kinds of actions blocks grouped, or where a user is probably going to load a page and go directly to a specific action. So, in layout, you can't rely on an actions block being directly preceded by a heading.

ARIA roles and states.

As well as Archive roles and states, actions can have ARIA roles and states. We don't really know a lot about this yet from a user perspective, though we've done quite a lot of testing in development. More user testing reports are being published these days, however.

navigation

a block of mostly links, that take you to other places

menu

a block of mostly buttons (like submit, select, destroy)

button

a single button in a navigation block, or a button on its own.

haspopup="true"

has an hidden secondary block

Back

Return to the documentation index.