ButtonToggleGroup disabled state styling

Im using slightly themed angular material components and this question is about restyling mat-button-toggle-group component.

Toggle group is a row (or column) of buttons that may be:

  • mutually exclusive
  • multiselected
  • disabled
  • selected
  • not selected yet

Now the current design looks like this:

enter image description here enter image description here

This is an example for when we have only 2 options and they are mutually exclusive. Potentially we could have a case of more than two, mutually exclusive options, where some might be disabled individually.

Personally I do not agree with this design because 'inactive' state represents the same situation as the 'readonly' one and while both mean that there is no option here, the 'inactive' shares styles with clickable ones. If I were to decide, I'd remove 'inactive' state and change border color so that it is consistent for all states (while blue for selected of course). UX Team argues that from users point of view it is more important to see what is selected and therefore this 'inactive' is better than 'readonly' - selected buttons have the same style, even disabled. So the accepted alternative is to remove 'readonly'.

The case when we need this button is when user has to know what is selected but cannot change it. So effectively the group is disabled and shows current, preselected value. Imo 'inactive' state does not fit here because the selected part of it shares the same attributes as the selected button in not disabled group, while the other button is disabled like in the 'readonly' one.

I understand it like "You have an option to select 1 of 1". Moreover, if this button would have some additional 'onclick' effects, its visual similarity to regular button might hint they are still enabled (ripple or maybe some side effects on click). This does not happen in case of 'readonly' version: grayed out or lowered opacity => disabled and not clickable.

When considering this group as one element and wanting to block user edits we should disable it. In most design frameworks I saw (disclaimer I'm just FE dev, not UX/UI) they are grayed out or opacified.

Also, 'feature-vise' this case is a slide-toggle case. So if the same control would be expressed using slide-toggle and then disabled, the whole toggle style would change, not just one half of it.

I don't really know if this is a 'this or that' type of question or an entry to the discussion. I guess it is subjective, least to some extent.

Tags: , , , , , ,