Search code examples
material-uiangular-materialmaterial-design

How can you change the border radius of a MatButtonToggleGroup in Angular Material 17


Is it possible to override the default styles of the MatButtonToggleGroup? How can you change the border radius and background color of the MatButtonToggleGroup?

enter image description here


Solution

  • You can overwrite variables for it, for example in main styles.scss file.

    To change border-radius there is variable --mat-standard-button-toggle-shape so just set --mat-standard-button-toggle-shape: 1px; for example.

    To change background-color of not selected mat-button-toggle there is variable --mat-standard-button-toggle-background-color and for selected mat-button-toggle there is variable --mat-standard-button-toggle-selected-state-background-color.

    Example:

    enter image description here