Button Groups

Example

Structure

<div class="button-group-container">
  <button mat-button>
      <span class="cvtr-icons my_dashboard"></span>
  </button>
  <button mat-button>
      <span class="cvtr-icons tools"></span>
  </button>
  <button mat-button>
      <span class="cvtr-icons lead_to_multiple_leads"></span>
  </button>
  <button mat-button>
      <span class="cvtr-icons system"></span>
  </button>
  <button mat-button>
      <span class="cvtr-icons leads"></span>
  </button>
</div>

Container

• Use <div class="button-group-container"> as a parent wrapper for button groups to automatically style the buttons within

Usage Rules

• Typically, button groups will most frequently be used within tables to group similar actions and decrease the amount of column spacing used by full size buttons

• Buttons within this container also tend to be icon only buttons with an accompanying tooltip that explains the path/usage upon hover.

• As a guide within table columns, button groups should be used if a single column contains 3 or more actions. For example:

  • If a column contains 2 buttons; ‘Add’ and ‘Edit’, then use the normal button with word buttons

  • If a column contains 3 buttons; ‘Add', ‘Edit’ and 'Remove’, then use icon buttons within a button group