Content Comparison

...

<button mat-button>
    Add
</button>

...

Container

• Use the HTML ‘button’ tag for any buttons

Component

• Use mat-button to import the button component

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.