How can I change the width of angular material button?

Viewed 57378

How can I change the width of angular material button? I am using angular 6.

4 Answers

You could attach a class and manipulate that.

<button mat-raised-button class="my-class">Show</button>

then in the CSS / SASS file

.my-class{
      width: 100px!important;
      min-width: unset!important;
}

This should ensure the attribute is overwritten. BR

You can write it like this:

<button mat-raised-button>BUTTON</button>

Or in CSS, without !important property:

mat-raised-button {
 width: 50px;
}

Merely add a style attribute (a way of diverses to do it) :

  <button mat-raised-button color="primary" style="width : 10em;">Primary</button>

Stackblitz.

Supposing this is your button:

<button id="myButton" mat-button color="primary">Primary</button>

You can go ahead an add id to button:

#myButton {
width: 150px;
}
Related