Feature request: md-button-group

[gkohen]

I was looking for Angular Material implementation of buttons that are grouped together and can be toggled exclusively or not. Here's an example of how bootstrap implements the feature: http://getbootstrap.com/components/#btn-groups I could not find such Angular Material nor find a spec for that behavior in the Google Material Design guidelines. Is there a better way of implementing such a functionality or is it a missing feature?

Thanks.

[ThomasBurleson]

Currently - for version 1.0 - the core team is focused only on features specified in the Material Design Specification. We would be receptive, however, to a Pull Request for this grouping.

[gabeidx]

There is a specification for "button groups" in the Material Design Guidelines: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons

[kildareflare]

+1 This would be a very useful addition. If I get time to develop my own version, I'll submit a PR.

[jordanskole]

+1

[avvari-da]

+1

[yashwanthm]

+1

[RainingNight]

+1

[goelinsights]

+1

[jaggedsoft]

+1

[fincha]

+1

[zhaolewen]

+1

[ntvsx193]

+1

[tsironis]

+1 I would love this!

[thanasis00]

+1 that would be useful indeed!

[jchukwum]

+1 Pretty please

[ghahramani]

+1

[cvile]

+1

[goelinsights]

I believe this has now been implemented in CSS per the button docs. Should we close this out?

On Thu, Mar 17, 2016 at 6:55 AM, Cvile notifications@github.com wrote:

+1

— You are receiving this because you commented. Reply to this email directly or view it on GitHub https://github.com/angular/material/issues/2907#issuecomment-197888096

---

Vijay Goel, M.D. Principal, Goel Insights 310-492-5601 www.goelinsights.com

[leocaseiro]

As @goelinsights mentioned, the fix is on https://material.angularjs.org/latest/CSS/button#grouping-with-css-overrides

[gkohen]

It is true that it CAN be implemented using CSS overrides. I'm in firm belief that it's a feature that should be implemented as an attribute in the component itself rather than have "internal" knowledge of how the component is styled. If the Angular Material changes in the future how the component is styled, it will break the CSS overrides.

On Wed, Mar 30, 2016 at 1:56 AM Leo Caseiro notifications@github.com wrote:

As @goelinsights https://github.com/goelinsights mentioned, the fix is on https://material.angularjs.org/latest/CSS/button#grouping-with-css-overrides

— You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub https://github.com/angular/material/issues/2907#issuecomment-203260548

[leocaseiro]

I agree with you.

I'm starting a component md-button-group that would work easily with CSS only:

<md-button-group class="md-raised">
    <md-button>Yesterday</md-button>
    <md-button>Today</md-button>
    <md-button>Tomorrow</md-button>
</md-button-group>

md-button-group {
  border-radius: 3px;
  display: inline-block;
  padding: 0;
  margin: 6px 8px;
  min-height: 36px;
  min-width: 88px;
}

md-button-group.md-raised:not([disabled]) {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

md-button-group > .md-button {
  border-radius: 0;
  border: 0;
  min-width: 20px;
  margin: 0;
}

PS: It's not perfect yet, but can be used to someone as temporary solution.

[marshall007]

@ThomasBurleson can we reopen this issue for some further discussion? I was about to start working on a PR for introducing md-button-group as a first-class component, but quickly realized there's already some undocumented styling for .md-button-group. Can you provide some insight as to why this exists? It's not very extensible in its current state and doesn't match the Material design spec like what's recommended in the button docs.

[Asvarduil]

+1

The team I work on wants to primarily do anything 'the material design way' first, and wants to avoid writing custom CSS, as a matter of philosophy - we know we can't always do this, but we strive to try. Having an official md-button-group would be a compact, beneficial way to express certain button relationships, that's done in a way fully compatible with material design's own design philosophy.

[RainingNight]

+1

[manojbadam]

+1

[acib708]

+1

[Splaktar]

Re-opening to demonstrate that we're open to a community PR that implements this in line with the Material Design spec.

[fincha]

IMHO it got outdated with Angular (5)