From 74c5a76990f942ca2dd421d89dc909cdbea66693 Mon Sep 17 00:00:00 2001 From: Johan Persson Date: Wed, 28 Jan 2026 15:12:54 +0100 Subject: [PATCH] fix(ui): improve disabled Switch styling Add proper visual feedback for disabled Switch component by applying `not-allowed` cursor and disabled text color. Signed-off-by: Johan Persson --- .changeset/twenty-clubs-itch.md | 7 +++++++ packages/ui/src/components/Switch/Switch.module.css | 5 +++++ 2 files changed, 12 insertions(+) create mode 100644 .changeset/twenty-clubs-itch.md diff --git a/.changeset/twenty-clubs-itch.md b/.changeset/twenty-clubs-itch.md new file mode 100644 index 0000000000..c69aabec7d --- /dev/null +++ b/.changeset/twenty-clubs-itch.md @@ -0,0 +1,7 @@ +--- +'@backstage/ui': patch +--- + +Fixed Switch component disabled state styling to show `not-allowed` cursor and disabled text color. + +**Affected components:** Switch diff --git a/packages/ui/src/components/Switch/Switch.module.css b/packages/ui/src/components/Switch/Switch.module.css index 447597c6d1..d35caf41a6 100644 --- a/packages/ui/src/components/Switch/Switch.module.css +++ b/packages/ui/src/components/Switch/Switch.module.css @@ -27,6 +27,11 @@ color: var(--bui-fg-primary); cursor: pointer; + &[data-disabled] { + cursor: not-allowed; + color: var(--bui-fg-disabled); + } + &[data-pressed] .bui-SwitchIndicator { &:before { background: var(--bui-fg-solid);