Buttons and Actions

Your button labels should be illustrative but concise, it's almost never enough for an button to simply say ‘OK’, it should attempt to provide more information about what action(s) will be performed once the user presses the button. The variation of the button you choose should help to highlight any dangerous or destructive actions.

General guidance

Use title case.

If the button relates to an action, the label should be (principally) a verb, use the state classes to reinforce dangerous or destructive actions.

If an action is related to creating new items of content, use ‘New’.

If the action involves adding to a parent item or to a context that already exists (such as adding a keyword to a content item) use ‘Add’.

If an action affects more than one item, you should badge your button.

If a button triggers more than one action, we should communicate this to the user where possible.

Using icons

Icons should sparingly to further illustrate the action where necessary. To avoid unnecessary visual noise, action bar buttons should avoid the use of icons.

Icons should be used in:

• All actions menu items Inline delete (times, not trash) Blocking actions/states (locked)* microinteractions (saving)

See the Pen Button icon examples by Pulsar (@pulsar) on CodePen.

Actions menu

• Use dividers to group related actions Use icons related to the action. Primary actions should be grouped at the top of the list* Disabled items should use a tooltip explaining why they are disabled

See the Pen XXeNXM by Pulsar (@pulsar) on CodePen.

Form actions

Buttons required to submit/cancel a form should be left aligned. Any destructive action, such as delete, should be right aligned to avoid accidental use.

See the Pen Form action buttons by Pulsar (@pulsar) on CodePen.