How to make button act like checkbox? AKA CheckButton, PushButton

Hi friends,

I don’t want to use Checkbox, I want to use button and have them in pressed mode, (Actually want On/Off switch on Button using Red/Green bulb-icon) ,
I tried switchMode in Button, but then it renders as a CheckBox.

So, Is there anyway, I can keep button in push mode? OR I can render CheckBox as a Button.

(Just for curiosity is there any difference in using CheckBox or Button with switchMode(true)?)

Cheers, :slight_smile:

The easiest solution is to create custom component (extend Button or create composite with Button) and implement style switching logic. E.g., 1st click does addStyleName(“on”), 2nd click – removeStyleName(“on”), etc. Support for more states (red, green, blue …) could be implemented the same way.

How about using
this switch button
? You can easily change graphics…

Also check
chameleon demo
for how to use a normal button creatively by changing images and styles to implement a toggle button. (See Buttons page under Compound Styles)

Or how about just having the checkbox and theme it to look like a button?

One more solution:
CustomCheckbox component from the Directory
. Allows total control of the look of the checkbox, use images, don’t use images. Just CSS.


Chameleon theme’s Segment (Button Bar ) makes sense for me :slight_smile:
And Switch button is cool too…