Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
Action button groups

When there are multiple related or alternative actions in a block primary and/or secondary action buttons should be grouped. The following pattern should apply when grouping buttons or deciding the style for each element in the group.

  • Secondary action buttons are presented either as grey links (e.g. Course info, Leave course, Cancel) or grey icon buttons (e.g. Report comment)
  • Primary actions buttons are presented either as pink links or pink buttons, depending on the context
  • If there is more than one button in the group - primary or secondary - they are separated by a bullet (e.g. Like • Reply, Course Info • Leave course)
  • If both groups are present and one of them contains two actions, they primary and secondary groups are aligned to opposite sides of the module (e.g. Like • Reply - left aligned, Report - right aligned)
  • If there is only one action in each group, both are positioned together and separated by a bullet (e.g. Post • Cancel).
Annotated image showing relative positions of button group elements
%ul.m-action-links
  %li.m-action-links__item
    = link_to 'Course info', '#', class: 'm-action-links__button'
  %li.m-action-links__item
    = link_to 'Leave this course', '#', class: 'm-action-links__button'

Use of push buttons

There should be only one push button per module and it should represent the primary call to action for that module.