How to show triple-state, double-action column via Material icons?
I have this boolean field that can be null too. So I have three states: null, true, false.
Based on it, I have two actions: make true, make false
Is there a good UI/UX way to combine all of them in one understandable UI element?
Right now I have this design. If a field is null, it's showed as false. If field is false, it's showed as a cancel material icon. If it's true, it's showed as a check icon. On hover, if it's false or null, click to approve
would be shown, and in case it's true click to disapprove
would be shown.:
These are the problems I have with this design:
- Clickability of items is not apparent. Thous users with my system soon realize it, since I have consistency
- Null items need to be shown differently, and they can't be shown empty, since empty won't be clickable.
How can I improve this?