Components: Feature Request: md-button-toggle-group color options (primary, accent, warn)

[leocaseiro]

Bug, feature request, or proposal:

Feature Request: add theme options for md-button-toggle-group

What is the expected behavior?

it should behave as same as md-raised-button's do.

What is the current behavior?

it only contains the default theme.

What are the steps to reproduce?

<md-button-toggle-group #group="mdButtonToggleGroup" color="primary">
  <md-button-toggle value="left">
    <md-icon>format_align_left</md-icon>
  </md-button-toggle>
<md-button-toggle-group

Eq: https://plnkr.co/edit/IHey0TCusgDW6X2eXV9W?p=preview

What is the use-case or motivation for changing an existing behavior?

Consistency on the Layout

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular 4.4.0
@angular/material 2.0.0-beta.10

Is there anything else we should know?

There's an old issue similar https://github.com/angular/material2/issues/2709

[Avejack]

i wonder why this isn't a thing already :D Would like to see this feature :)

[umutesen]

It still has not been implemented, it would be a nice feature.

[diogodomanski]

+1

[MatthewTrout]

Should probably raise a separate issue rather than dovetailing this one, but in addition to colors, the other button features mat-flat-button etc would be useful. I appreciate that some might not lend themselves to toggle buttons but I think certainly having a flat variant would be achievable, especially when using toggle buttons in isolation.

[niveditaece]

+1

[EdricChan03]

@diogodomanski @niveditaece Please don't add unnecessary "+1"s to the issue. Consider using the emoji reactions instead.

[FernandoIbaePLiborio]

mat-button-toggle.mat-button-toggle-checked, mat-button-toggle.cdk-focused, mat-button-toggle.cdk-mouse-focused {
background: #3f51b5;
}

[sivadinesh1]

@FernandoIbaePLiborio solution works for the active buttons without any issues. Can you share the code to style the inactive buttons too. so that we can have full control of toggle button. Thanks

[nadav-lin]

@sivadinesh1 this should work
mat-button-toggle {
background: #4CAF50;
}

[FernandoIbaePLiborio]

https://github.com/FernandoIbaePLiborio/client/blob/master/src/styles.css
I'm progressing an application, maybe it will help.

[simeyla]

Expecting material issues to be fixed is getting too stressful for me.

[webia1]

still no progress :weary: The Solutions above would not work if you have a toggle-button-component and you want to reuse it within the whole application. Imagine, every toogle-button-group would have different colors. Therefore it must be an @Input like 'color' or 'theme' as suggested in the very first posting.

Excuse me but that is the worst material-implementation at all :disappointed: (Take an example from a well done job-> VueJS /Vuetify)

[biltongza]

My team accomplished this with a mixin:

@import '~@angular/material/theming';

@mixin custom-button-toggle-theme($app-theme) {
    $primary: map-get($app-theme, primary);
    $warn: map-get($app-theme, warn);
    $accent: map-get($app-theme, accent);
    $foreground: map-get($app-theme, foreground);
    $background: map-get($app-theme, background);

    .mat-button-toggle-group {
        border: solid 1px mat-color($primary);
    }

    .mat-form-field-invalid {
        .mat-button-toggle {
            .mat-button-toggle-label-content {
                color: mat-color($warn);
            }
        }

        .mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {
            border-left: solid 1px mat-color($warn);
        }

        .mat-button-toggle-group {
            border: solid 1px mat-color($warn);
        }
    }
    .mat-button-toggle {
        background-color: mat-color($background, card);

        .mat-button-toggle-label-content {
            color: mat-color($foreground, text);
        }
    }

    .mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {
        border-left: solid 1px mat-color($primary);
    }

    .mat-button-toggle-checked {
        background-color: mat-color($primary);

        .mat-button-toggle-label-content {
            color: mat-color($background, card);
        }
    }
}

@include custom-button-toggle-theme($your-theme);

You can fairly trivially work this into a component to get an input binding that lets you set the colour as you wish, just my team hasn't needed anything other than the primary colour.

[uvcreation]

@leocaseiro hope this will work for you. It is working for me.

@import "~@angular/material/theming";
@include mat-core();

$app-primary: mat-palette($mat-indigo);
$app-accent: mat-palette($mat-pink, A200, A100, A400);

$app-theme: mat-light-theme($app-primary, $app-accent);

@mixin mix-app-theme($app-theme) {
$primary: map-get($app-theme, primary);
$accent: map-get($app-theme, accent);

.mat-button-toggle {
background-color: mat-color($primary);
color: mat-color($primary, default-contrast);
}

.mat-button-toggle-disabled {
background-color: rgba(0,0,0,.12);
color: rgba(0,0,0,.26);
}
.mat-button-toggle-checked {
background-color: mat-color($accent);
color: mat-color($accent, default-contrast);
}
}

[etay2000]

Just thought I would comment before this issue gets automatically locked. I know this issue is still considered new in Angular terms (only 3 years old), and I know this is open source and I am not supposed to have any expectations, but seriously?