how to create a 2-state button


I would like to create a simple 2 state button/checkbox/radio button whatever I would like to style this component to look like a standard vaadin button ( it can have 2 states visually : normal and pressed)

my idea was to use a standard butttons I saw that there is a “v-pressed” class added to the buttons html when it is pressed/clicked So basically I tried to add/remove this style to/from the button on each click

In firefox it is ok BUT in IE it isn’t

	public void buttonClick(ClickEvent event) {

		Button buttonClicked= event.getButton();
		if (buttonClicked == addTicketButton){
		if (buttonClicked == quickSearchButton){
			String searchTerm = quickSearchTextField.toString();
			Filter filter= new SimpleStringFilter("dpc_name", searchTerm, true, false);
			IndexedContainer tc =(IndexedContainer) myTickets.getContainerDataSource();
		if (buttonClicked == ticketModeSupervisor || buttonClicked == ticketModeCoordinator || buttonClicked == ticketModeOwner){

			int ticketMode=(Integer) buttonClicked.getData();
			System.out.println("Ticket mode: "+ticketMode);
		Iterator<Component>	ticketModeIterator = ticketModeLayout.getComponentIterator();
		while (ticketModeIterator.hasNext()){;


what should I do to make it work in every browser? Do I have to add/remove additional styles to make it work ?


the ‘v-pressed’ class name is used in IE and Opera to apply the pressed button css to the v-button element. Your solution does not work in IE because the v-pressed is removed by the client side code when the button is released. I suggest that you create your own style name with similar CSS rules to make this work. You might e.g. insert the following in your theme:

.v-button-stuck-button {
    background-image: url("../reindeer/button/img/button-sprites.png");
    background-position: left -52px;
    outline: medium none;

And then just call addStyleName(“stuck-button”) on the Button you want to apply this style to. Make sure that the background image URL points to the correct path!