In our web application, we have a list of items for which multiple actions can be scheduled. If an action is available but not selected, it is displayed as a gray button. When the user clicks on it, the button changes to a color, indicating that the action is scheduled. When the user clicks on it again, the action is cancelled and the button reverts to its previous state. One such button is displayed for each action, for each item.

An example:

enter image description here

My team has raised a couple of concerns:

  • The gray color may make the user think that the button is disabled

  • It may not be clear to the user that he can cancel the action by clicking on it again

I don't think this is a problem, especially if we use tooltips (The "vote" and "accept answer" features of StackExchange are implemented the same way), but are there ways to improve the usability of these action buttons?

3 Answers 3


Over the years I've learned that toggle buttons are not for displaying states in lists. This being said, a toggle button works well when it is on its own. Like a play/pause button.

A checkbox, however, serves as a great indicator of state in a list of items. It is visually clear and does not use much real estate. The label for a checkbox does not have to repeat on every row in a list. Simply place it in a column header.

Also, if you are concerned about users being able to scan the list easily you could add some visual clues when a checkbox is selected, like bold or background color.


To make it clearer you could add a icon to the button when it's activated. Here's a very rough draft of the idea:

Button with tick

Update after Jens comment:

I think both Denzos and Allans answers have a valid point (using checkboxes with text instead of buttons / using embossed buttons). But it's hard to say which solution would work best without knowing more about your project. I'd recommend you read these two posts, they could help you with your decision making:

Hope that helps, Phil

  • Thanks, Phil! We want to keep the buttons as simple as possible -- they are about 60% of the size of my example (no room to adorn it with a a checkmark), and there are a lot of them on the screen. I want to user to be able to see with one glance which actions are selected (hence the emphasis on color vs. grayed) Apr 10, 2011 at 21:05
  • Thanks for your reply - see updated answer for my thoughts on it.
    – Phil
    Apr 11, 2011 at 5:36

It will largely depend on your UI conventions, but you can consider making it actually look like a button, with an embossed (appearing to be clickable) and clicked state.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.