#7742·headlamp

frontend: PluginSettingsDetails: Disabled Save button looks enabled due to hardcoded inline styles

Author: Satyam087Created Sep 22, 2026Updated Sep 22, 2026

Describe the bug

In Settings → Plugins → (plugin details), the Save and Cancel buttons use hardcoded inline styles (backgroundColor: 'silver', color: 'black' on Save, color: 'silver' on Cancel). This causes two problems:

  1. A disabled Save button looks enabled. The inline style overrides MUI's disabled treatment, so before any setting is changed (disabled={!enableSaveButton}), Save still renders as a solid silver button, indistinguishable from its enabled state. Verified in the DOM: {"text":"Save","disabled":true,"style":"background-color: silver; color: black;"}.
  2. The enabled Cancel button looks disabled. Silver text on the light background reads as a disabled control, the inverse of the actual state.

The hardcoded silver also ignores the active theme in both light and dark modes, and the row's borderColor: 'silver' bypasses the theme divider color. Sibling Settings components (IconPicker, ColorPicker) use the standard themed variant="contained" buttons.

To Reproduce

  1. npm run storybook in frontend/
  2. Open Settings/PluginSettingsDetailWithout Auto Save
  3. Observe Save (disabled, but looks active) and Cancel (enabled, but looks inactive)
  4. Type in the plugin's input: Save becomes enabled with no visual change

Same behavior in the app under Settings → Plugins for any plugin with displaySettingsComponentWithSaveButton.

Screenshot

Save here is disabled, Cancel is enabled:

current

Environment

  • Headlamp version: main (33015fbf5)
  • Storybook / browser: Chromium

Are you able to fix this issue?

Yes. PR incoming: drop the inline styles so the buttons get the standard MUI contained/text treatment (matching the other Settings pages) and use divider for the separator color.

Source: kubernetes-sigs/headlamp