Button with `margin={false}` has margin

[ryami333]

Describe the Bug.

As per title – Button with margin={false} has a top-margin.

• ✅ The element correctly receives the btn and btn--no-margin classes
• ✅ The .btn--no-margin selector applies --margin-block: 0;
• ✅ The .btn selector applies margin-block: var(--margin-block);
• ❌ The element also receives the .btn--style-primary class, whose selector applies margin-top: 1rem at a higher specificity than .btn's margin-block: var(--margin-block);`

Reproduction Steps

Render a Button with margin={false}, eg:

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

export function MyCustomComponent() {
  return <Button margin={false}>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]

I am unable to reproduce this. It feels like this styling might be coming from some of your own css. Especially since the button is blue I can tell that you are applying custom css.

Here is the css for the Button component, no where in there does it set margin-top like you are suggesting.

I also tested this and was unable to reproduce, using a custom component and using the button component while setting margin={false}.

[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.