Repository navigation
Inconsistent style of disabled and readonly states when a color variant is used #2
Description
Describe the bug
When a color variant like (primary, success, etc.) is added to a toggle button that is disabled, the color variant is ignored. But when is added to a toggle button that is set to readonly, the color variant takes over the button and it doesn't look like readonly:
Expected behavior
Looking at Vaadin components, for example Button that has color variants, the disabled state current behavior is okay. If there any color variant applied, it is ignored. See https://vaadin.com/docs/v24/components/button#disabled. (Button component does not have a readonly state and I couldn't find one with readonly state and color variants to analize).
So, IMHO, disabled is consistent with the framework.
For readonly. we should explore options:
- Color variants should be ignore as disabled state does.
- The color should be still there but in a lighter shade or some sort of opacity in toggle button background.
- Only border should display the color with some kind of opacity.
Minimal reproducible example
Run demo locally and add a color variant to each state:
ToggleButton disabled = new ToggleButton().setRightLabel("Disabled");
disabled.setId("disabled");
disabled.setEnabled(false);
disabled.addThemeVariants(ToggleButtonVariant.PRIMARY);
ToggleButton readOnly = new ToggleButton(true).setRightLabel("Read-only");
readOnly.setId("read-only");
readOnly.setReadOnly(true);
readOnly.addThemeVariants(ToggleButtonVariant.PRIMARY);Observe states displayed as in the image share in the description of this issue.
Add-on Version
1.0.0-SNAPSHOT
Vaadin Version
24.9 / 25
Additional information
This was found during some testing of the Initial Implementation PR #1. As there're still doubts on the right approach to take, it was decided to address this in a separate issue.
Metadata
Metadata
Assignees
Labels
Type
Projects
- Status
Activity
paodb commentedon Apr 16, 2026
I've been giving this a second thought (with some help) and here are my conclusions:
Justification about why disabled state it's okay as it is:
Disabled fields are functionally "dead." If we allow color variants (Primary, Success) to leak into the disabled state, we create visual noise. A grayed-out field tells the user's brain: "Skip this, it's not relevant to your current task."
Vaadin's default behavior of ignoring color variants for disabled components is correct because it enforces the "Gray = Inactive" universal web standard.
Proposed solution for readonly state: applying a faded or desaturated version of the variant
Having a faded color clearly distinguishes the field from an Active (bright) toggle. Unlike a disabled field, the "faded color" still communicates the nature of the data (e.g., "This was a Primary selection") without the false promise of being clickable. And it maintains a higher contrast than the "Disabled" state, ensuring the information remains readable and selectable, which is the primary technical requirement of the Read-only state.
javier-godoy commentedon Apr 28, 2026
Disabled state it's okay as it is. ✔
Proposed solution for readonly state: applying a transparent background and base border-color on a (desaturated?) version of the variant.
Rationale: read-only Vaadin fields don't have a solid background.
fix: add desaturated variant border in readonly checked state