Disabled button is almost invisible in "dark" mode

[ryami333]

Describe the Bug.

When you render a Button in "dark" mode, there are two issues:

• The background color of the button is almost identical to the background color of the dashboard
• The text color of the button is almost identical to the background color of the button

As such, the contrast is so low that the button is effectively invisible.

Yes, there is a button beneath the label in that image, that says "Hello World"↑

Reproduction Steps

1. Use Payload in "dark" mode
2. Render a Button with the disabled={true} prop.

import { Button } from "@payloadcms/ui";

export function MyCustomComponent() {
  return <Button disabled={true}>Hello World</Button>;
}

Environment Info

Binaries:
  Node: 24.6.0
  npm: 11.5.1
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  payload: 3.56.0
  next: 15.5.3
  @payloadcms/db-mongodb: 3.56.0
  @payloadcms/email-nodemailer: 3.56.0
  @payloadcms/graphql: 3.56.0
  @payloadcms/next/utilities: 3.56.0
  @payloadcms/plugin-cloud-storage: 3.56.0
  @payloadcms/storage-s3: 3.56.0
  @payloadcms/translations: 3.56.0
  @payloadcms/ui/shared: 3.56.0
  react: 19.1.1
  react-dom: 19.1.1
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.6.0: Mon Jul 14 11:30:29 PDT 2025; root:xnu-11417.140.69~1/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 8

[JarrodMFlesch]

Similar to #13871 it seems like your own css is overwriting the provided css from payload. Here is what a disabled button actually looks like:

[ryami333]

My apologies @JarrodMFlesch, that's a bit embarassing!

[github-actions]

This issue has been automatically locked.
Please open a new issue if this issue persists with any additional detail.