ButtonGroup component released

ButtonGroup allows developer to group together commonly used buttons for minimum layout space. ButtonGroup groups buttons the way that only the outermost buttons have rounded corners. All the middle buttons and in case of only two buttons, the inner corner roundings are removed.

This is effective way in many layouts having multiple buttons to group together logically or meaningfully significant buttons.

Buttons inside group can easily be disabled and used just as normal buttons.

Find ButtonGroup from the Directory:

Updated version 1.1 has been released. New version addresses following issue:

  • Fixed issue when removing button from group and adding it to another parent
  • Fixed button group not removing button from the client side properly when removing
  • Fixed issue where using button to disable another button in the group caused client side to freeze
  • Fixed the left most button size being bigger than others, noticable especially when buttons have very narrow caption

Another update, version 1.2 is now released with following fixes and improvements:

  • Fixed issue where rounded corners were missing if left or right most button was set invisible
  • Added removeAllButtons() method to remove all the buttons at once
  • Added replaceButton(old, new) method to replace given old button with given new button in place.

Does this add-on work with other themes? A first check was disappointing with Runo.

Or is it easy to style my buttons by myself? E.g.

button {
font: 14px Helvetica Neue;
background-color: #222;
background-image: -moz-linear-gradient(top, rgba(255,255,255,.25), rgba(255,255,255,.11));
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,.25)),color-stop(1, rgba(255,255,255,.11)));
background-image: -webkit-linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.11));
color: #fff;
text-rendering: optimizeLegibility;
text-shadow: 0 -1px 1px #222;
padding: 6px 10px 6px 10px;
border: 0;
border-radius: 0;
border-bottom: 1px solid #222;
margin: 0;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;

button.first {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;

button.last {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;

button.active {
background-color: rgb(65,102,133);

button:hover {
background-color: steelblue;

Thank’s for this add-on, I really miss this feature in vaadin.

Currently component works only with the Reindeer theme. It’s possible to create own theme for the component, you can use your own images for the button. Theme is currently same as with the Reindeer, it uses same images and only alters the positionings to remove the roundings in the middle buttons.

Each button type (left, middle, right) has own class names and you can specify own graphics using them and button’s own button css-class and wrapper css-class.

btnGroup.addButton(new Upload(args)) doesn’t work.
Is there a component that groups upload buttons?

There is mention that this add-on is now part of the “core framework.”
I am upgrading from Vaadin 7 to 8.7.1, but I’m not sure what is in the core framework that does what ButtonGroup did. Does anybody have info on what needs to change for V8?