md-button size (angular material)

Question

I'm very new to angular-material and I'm using some md-button directives. As I'm coming from Bootstrap world, I'm searching for a way to have different sizes for md-buttons. Something like btn-xs and btn-sm classes in Bootstrap.

I created a class md-button-xs and tried to set size of button using this class with no success. I even tried to resize the button using developer options in Google Chrome but that didn't work too.

How can I have different sizes for md-button and other Angular Material components?

Solution 1

We're all (well kind of) new to Angular Material. This serves as my disclaimer to my answer.

I never spent much time with twitter bootstrap, but I can tell you that specifying sizes is probably not as important in the realm of Angular Material.

• Angular Material utilizes Flexbox. Specifying specific size is less important in Angular Material, I have found personally. Demo: Layout > Grid System
• While you can accomplish a lot with grids in ngMaterial (Eg: grid lists and child alignment), I recommend seeing if the simple layout attribute works for you "out of the box", to accompany the general usage of Flexbox.

Why not mess around with the buttons in the buttons demo page? Or is there something more specific you are looking to do that you need help with? https://material.angularjs.org/latest/#/demo/material.components.button

I messed with it a bit for you! Pretty simple stuff once you get going. http://codepen.io/qvazzler/pen/jPgbQO

<md-button flex="15">{{title1}} (Not much)</md-button>
<md-button flex="15" md-no-ink="" class="md-primary">Primary (Not much either)</md-button>
<md-button flex="33" ng-disabled="true" class="md-primary">Disabled (More space for me!)</md-button>
<md-button flex class="md-warn">{{title4}} (I'll have what's left)</md-button>

Good luck!

Post written with reference to Angular Material version 0.10.1. If you are using a newer version and you can't get familiar results, use the site to change version after browsing to any of my links to figure out what's wrong. And there's always the changelog.

Solution 2

Simply you can do your own if you want, for example i did that:

    .material-cust-large-button {
    width: 300px;
    height: 70px;
    padding-top: 13px;
}
.material-cust-medium-button {
    width: 150px;
    height: 70px;
    padding-top: 13px;
}

And in html:

<md-button class="md-raised md-primary material-cust-large-button">text</md-button>
<md-button ui-sref="..." class="md-raised md-primary material-cust-medium-button">text</md-button>

And it works as i expected:

Solution 3

This was kind of tricky for me. The issue was that the min-width is set by Angular Material to 88px. I wanted mine to be VERY small. I was setting width and max-width, but hadn't thought to check min-width. Min-width is set pretty high for a global, common thing like a button... So set the min-width or you'll have problems resizing this if you want it to be small.