/
Button Groups

Button Groups

Owned by Amish Ladhu
Last updated: Nov 01, 2019
1 min read

Example

Basic Usage

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

Component

  • Use mat-button to import the button component

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