I have a number of statuses from which a user can select only one status. I tried this new control which is sort of an alternative to radio to buttons where user can select their desired status by just clicking on the pill and the rest will deselect themselves.


Now according to our business requirement, it is not necessary for the user to specify the status. They can leave this filter blank as well because their are a lot of other filters which can be used as well.

For that I want to provide an option of deselecting a pill. The options that I have:

  1. Click on the selected pill to deselect it
  2. Provide a deselect button at the end in order to deselect your choice

Which one will serve the purpose? I'm also open to new solutions.

Here is the gif for the status filter area

enter image description here

  • My gut feeling would be to have a pill named "none" rather than a "deselect" button.
    – Mr Lister
    Commented Jul 21, 2018 at 7:06

1 Answer 1


Place both.
Deselect button if there should be different in design from rest of the pills.

Clicking the pill to deselect it should be anyhow there, it is the standard behaviour. I would play with shadows or elevation to make more clear. So pressed should be with inset shadow / stamp effect, also on hover you animate it so its clear it will be "pressed" / selected.

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.