Materialize: Create btn-small and btn-mini

[thiagodp]

Smaller button sizes needed in many different scenarios.

Maybe these buttons could look like this.

[matrix818181]

This is my version of btn-small :

.btn-small {
    height: 24px;
    line-height: 24px;
    padding: 0 0.5rem;
}

[Dogfalo]

There aren't any small buttons, this is to conform to material design standards which help enforce a better UX. The spec is like this because buttons that are smaller than the default are harder to press on mobile and if you keep buttons relatively uniform in size, it helps users identify the buttons with ease (The same reason text in buttons is uppercase)

[thiagodp]

Buttons don't need to be that big to create a better UX. Smaller buttons are still clickable and don't take so much space. Bootstrap is an example on how different button sizes can be effective for some situations. Imagine to create a simple text editor like this I'm using now with just Materialize buttons...
IMHO, this can be an opportunity for improving this framework, in order to provide better components than the current "standard".

[coolternet]

its possible to add a condition of screen size...

[rizplate]

Please re-open this issue. Smaller buttons are needed in many scenarios.

[nardonykolyszyn]

Cool

[rizplate]

@thiagodp Would you consider forking this and adding the support for this and other bootstrap features.

[thiagodp]

@rizplate Sorry, but I don't have time now.

[devxpy]

@Dogfalo the material design spec has button density

https://material.io/guidelines/components/buttons.html#buttons-style

[devxpy]

this is my version of btn-small, dimensions taken from the material design spec.

.btn-small {
    color: black;
    border: none;
    border-radius: 2px;
    display: inline-block;
    height: 32px;
    line-height: 32px;
    padding-left: 16px;
    padding-right: 16px;
    text-transform: uppercase;
    max-font-size: 13pt;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
}

[Dogfalo]

We brought the buttons to be more in line with the updated spec, we have added the smaller buttons as well. Please keep in mind, the spec suggests you only use smaller buttons if mouse and keyboard are the primary input device as it negatively impacts touch users.
9506120ca5a2d92d74c6762c92b4ebf153db0f17

[devxpy]

I had to do a dense UI recently, check it out

http://exam.pinnacleiitjee.com/quiz/exam/398/

[jelofson]

@Dogfalo Thanks for adding these. I see the reference in the docs, but it's not actually implemented in the alpha 3 downloads, so it is a bit misleading.

[jaynguyen89]

This is my button small and mini, they also work with other Materialize CSS classes for button and text.

.btn-small {
color: #FFF;
text-align: center;
background-color: #F29023;
border: none;
border-radius: 2px;
line-height: 20px;
padding: 5px 7px;
text-transform: uppercase;
vertical-align: middle;
-webkit-tap-highlight-color: transparent;
background-clip: padding-box;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.btn-small :hover :active {
background-color: #EF6C00;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.btn-mini {
color: #FFF;
font-size: 0.85rem;
text-align: center;
background-color: #F29023;
border: none;
border-radius: 2px;
line-height: 13px;
padding: 5px;
text-transform: uppercase;
vertical-align: middle;
-webkit-tap-highlight-color: transparent;
background-clip: padding-box;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.btn-mini :hover :active {
background-color: #EF6C00;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}