Action Button Groups

Example

Screen Shot 2018 02 14 At 10 32 43
Screen Shot 2018 02 14 At 10 32 02

Description

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.

Elements

Link

Bullet

Action button

Variants

Primary and Secondary

If there is only one action in each group, both are positioned together and separated by a bullet (e.g. Post • Cancel).

  • 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
Screen Shot 2018 02 14 At 10 50 04
Screen Shot 2018 02 14 At 10 43 39
Screen Shot 2018 02 14 At 10 40 15