[v4] Button: `buttonStyle="link"` is in the type but has no styles

Open Beginner friendly
  • Is something wrong?
#19,396 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
72/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
css, react, typescript
Domain
design, frontend

Research direction

Start with packages/ui/src/elements/Button/types.ts and packages/ui/src/elements/Button/index.css; compare the link style with the existing button styles and check how the other listed components use the same union. Decide whether the intended fix is adding link styling or removing the unused type value, then verify the enabled, disabled, selected, and hover states match the chosen behavior.

Written by the indexing model from the issue text.

Description

area: ui Bug created-by: Contributor status: needs-triage v3
Describe the Bug.

ButtonProps['buttonStyle'] accepts 'link', but Button/index.css has no .btn--style-link rules. A link button gets only the base .btn styles (transparent background, color: inherit) and renders as bare text in the surrounding text color:

  • no hover state, not even the background fill ghost gets on hover;
  • disabled looks the same as enabled; the only difference is cursor: not-allowed;
  • selected has no visible effect;
  • nothing about it looks like a link: no link color and no underline.

'link' was added to the buttonStyle unions of Button, DrawerToggler, DrawerHeaderAction and DocumentDrawerToggler in #18395 (fix(ui): align hierarchy checkbox styles). That PR added no CSS for it, and nothing in the repo passes buttonStyle="link" (main at 526bd4f). So it looks like a leftover. Before #18395 the v4 union was 'dashed' | 'destructive' | 'ghost' | 'pill' | 'primary' | 'secondary', and 3.x never had 'link'.

Expected: either link gets a link-like style (link color, underline on hover, dimmed when disabled), or 'link' is removed from the types.

Image
Reproduction Steps
'use client'
import { Button } from '@payloadcms/ui'

export const LinkButtons = () => (
  <>
    <Button buttonStyle="link">Enabled</Button>
    <Button buttonStyle="link" disabled>Disabled</Button>
    <Button buttonStyle="link" selected>Selected</Button>
  </>
)
  1. Mount the component above anywhere in the admin, e.g. admin.components.beforeDashboard.
  2. All three buttons look the same, and hovering any of them changes nothing.
  3. grep style-link node_modules/@payloadcms/ui/dist/elements/Button/index.css finds nothing.
Environment Info
payload: 4.0.0-beta.7
@payloadcms/ui: 4.0.0-beta.7
Node: 24
Dominant language
TypeScript
Stars
45.6k
Forks
4.4k
Avg merge
1d 23h
Merged PRs (30d)
237

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from payloadcms/payload

All issues in payloadcms/payload

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.