fix(ui-buttons): fix buttons disabled style and color

[git-nandor]

INSTUI-5029

Summary

Fix the disabled styling of background-less BaseButton variants in the new Light/Dark themes, so that the secondary ghost (withBackground={false}) and ai-secondary buttons now correctly grey out their text, icon, and border when disabled — matching the other variants.

Test plan

Verify that disabled buttons are displayed correctly and consistently in v11.7 Light and Dark themes.
If it has background or border than should keep it in disabled state and should not be transparent.

<View
  display="block"
  padding="small"
  style={{
    backgroundImage:
      'repeating-linear-gradient(45deg, #ffffffff 0 3px, #f1f1f1ff 3px 6px)'
  }}
>
  <Heading level="h3">Base:</Heading>
  <View display="block">
    <BaseButton >Base</BaseButton>
    <BaseButton color="success" >Success</BaseButton>
    <BaseButton color="primary" >Primary</BaseButton>
    <BaseButton color="secondary" >Secondary</BaseButton>
    <BaseButton color="ai-primary" >Primary</BaseButton>
    <BaseButton color="ai-secondary" >Secondary</BaseButton>
    <IconButton color="primary" ><PlusInstUIIcon /></IconButton>
    <IconButton color="secondary" ><UserInstUIIcon /></IconButton>
    <IconButton color="ai-primary" ><IgniteaiLogoInstUIIcon/></IconButton>
    <IconButton color="ai-secondary" ><IgniteaiLogoInstUIIcon/></IconButton>
  </View>
  <View display="block">
    <BaseButton interaction="disabled" >Base</BaseButton>
    <BaseButton interaction="disabled" color="success" >Success</BaseButton>
    <BaseButton interaction="disabled" color="primary" >Primary</BaseButton>
    <BaseButton interaction="disabled" color="secondary" >Secondary</BaseButton>
    <BaseButton interaction="disabled" color="ai-primary" >Primary</BaseButton>
    <BaseButton interaction="disabled" color="ai-secondary" >Secondary</BaseButton>
    <IconButton interaction="disabled" color="primary" ><PlusInstUIIcon /></IconButton>
    <IconButton interaction="disabled" color="secondary" ><UserInstUIIcon /></IconButton>
    <IconButton interaction="disabled" color="ai-primary" ><IgniteaiLogoInstUIIcon/></IconButton> 
    <IconButton interaction="disabled" color="ai-secondary" ><IgniteaiLogoInstUIIcon/></IconButton> 
  </View>

  <Heading level="h3">No Background:</Heading>
  <View display="block">
    <BaseButton withBackground={false} >Base</BaseButton>
    <BaseButton color="success" withBackground={false} >Success</BaseButton>
    <BaseButton color="primary" withBackground={false} >Primary</BaseButton>
    <BaseButton color="secondary" withBackground={false} >Secondary</BaseButton>
    <BaseButton color="ai-primary" withBackground={false}>Primary</BaseButton>
    <BaseButton color="ai-secondary" withBackground={false}>Secondary</BaseButton>
    <IconButton color="primary" withBackground={false} ><PlusInstUIIcon /></IconButton>
    <IconButton color="secondary" withBackground={false} ><UserInstUIIcon /></IconButton>
    <IconButton color="ai-primary" withBackground={false} ><IgniteaiLogoInstUIIcon/></IconButton>
    <IconButton color="ai-secondary" withBackground={false} ><IgniteaiLogoInstUIIcon/></IconButton>
  </View>
  <View display="block">
    <BaseButton interaction="disabled" withBackground={false} >Base</BaseButton>
    <BaseButton interaction="disabled" color="success" withBackground={false} >Success</BaseButton>
    <BaseButton interaction="disabled" color="primary" withBackground={false} >Primary</BaseButton>
    <BaseButton interaction="disabled" color="secondary" withBackground={false} >Secondary</BaseButton>
    <BaseButton interaction="disabled" color="ai-primary" withBackground={false}>Primary</BaseButton>
    <BaseButton interaction="disabled" color="ai-secondary" withBackground={false}>Secondary</BaseButton>
    <IconButton interaction="disabled" color="primary" withBackground={false} ><PlusInstUIIcon /></IconButton>
    <IconButton interaction="disabled" color="secondary" withBackground={false} ><UserInstUIIcon /></IconButton>
    <IconButton interaction="disabled" color="ai-primary" withBackground={false} ><IgniteaiLogoInstUIIcon/></IconButton>
    <IconButton interaction="disabled" color="ai-secondary" withBackground={false} ><IgniteaiLogoInstUIIcon/></IconButton>
  </View>

  <Heading level="h3">No Background No Border:</Heading>
  <View display="block">
    <BaseButton withBorder={false} withBackground={false}>Base</BaseButton>
    <BaseButton color="success" withBorder={false} withBackground={false} >Success</BaseButton>
    <BaseButton color="primary" withBorder={false} withBackground={false}>Primary</BaseButton>
    <BaseButton color="secondary" withBorder={false} withBackground={false}>Secondary</BaseButton>
    <BaseButton color="ai-primary" withBorder={false} withBackground={false}>Primary</BaseButton>
    <BaseButton color="ai-secondary" withBorder={false} withBackground={false}>Secondary</BaseButton>
    <IconButton color="primary" withBorder={false} withBackground={false} ><PlusInstUIIcon /></IconButton>
    <IconButton color="secondary" withBorder={false} withBackground={false} ><UserInstUIIcon /></IconButton> 
    <IconButton color="ai-primary" withBorder={false} withBackground={false} ><IgniteaiLogoInstUIIcon/></IconButton> 
    <IconButton color="ai-secondary" withBorder={false} withBackground={false} ><IgniteaiLogoInstUIIcon/></IconButton> 
  </View>
  <View display="block">
    <BaseButton interaction="disabled" withBorder={false} withBackground={false}>Base</BaseButton>
    <BaseButton interaction="disabled" color="success" withBorder={false} withBackground={false} >Success</BaseButton>
    <BaseButton interaction="disabled" color="primary" withBorder={false} withBackground={false}>Primary</BaseButton>
    <BaseButton interaction="disabled" color="secondary" withBorder={false} withBackground={false}>Secondary</BaseButton>
    <BaseButton interaction="disabled" color="ai-primary" withBorder={false} withBackground={false}>Primary</BaseButton>
    <BaseButton interaction="disabled" color="ai-secondary" withBorder={false} withBackground={false}>Secondary</BaseButton>
    <IconButton interaction="disabled" color="primary" withBorder={false} withBackground={false} ><PlusInstUIIcon /></IconButton>
    <IconButton interaction="disabled" color="secondary" withBorder={false} withBackground={false} ><UserInstUIIcon /></IconButton>
    <IconButton interaction="disabled" color="ai-primary" withBorder={false} withBackground={false} ><IgniteaiLogoInstUIIcon/></IconButton>
    <IconButton interaction="disabled" color="ai-secondary" withBorder={false} withBackground={false} ><IgniteaiLogoInstUIIcon/></IconButton>
  </View>

</View>

Co-Authored-By: 🤖 Claude

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://instructure.design/pr-preview/pr-2596/
Built to branch gh-pages at 2026-06-18 07:46 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[github-actions]

Visual regression report

✅ No changes.

Status	Count
Unchanged	32
Changed	0
New	0
Removed	0

📊 View full report

_{Baselines come from the visual-baselines branch. They refresh on every merge to master.}

[adamlobler]

I checked the Button and IconButton disabled states, and I think everything works well now. Thanks for the quick fix!