Skip to content

feat(btn): full rewrite of button styles#4432

Open
pdanpdan wants to merge 4 commits intosaadeghi:masterfrom
pdanpdan:feat/button-cleanup
Open

feat(btn): full rewrite of button styles#4432
pdanpdan wants to merge 4 commits intosaadeghi:masterfrom
pdanpdan:feat/button-cleanup

Conversation

@pdanpdan
Copy link
Contributor

@pdanpdan pdanpdan commented Feb 8, 2026

Organize styles so that there is very little need for duplication.
The only styles that do not work with tailwind responsive modifiers are the ones for disabled .btn-link and .btn-ghost.

I have prepared 3 playgrounds that should cover most of the normal usage:

Problems fixed:

  • if buttons (checkbox) are used in .filter they do not show active status
  • aria-disabled="true" is not accounted for
  • on all dark themes .btn-neutral .btn-soft cannot be used
    • addressed by introducing an internal variable to set the soft bg color for neutral (--int-soft-bg: var(--color-neutral-content) 80%;)
  • .btn-soft, .btn-outline, .btn-dash, .btn-ghost, .btn-link when there is contrast between fg (--btn-fg) and bg (--btn-color) button colors, but there is no contrast in rest state between bg (derivative of --color-base-100 or page bg) and fg (--btn-color)
    • new user facing variable --btn-rest-fg that sets the fg color for buttons in rest state (only for soft, outline, dash, ghost) - it is ignored for .btn-neutral because that color has its own rules
    • .btn-link does not need any mitigation because it uses the same color all the time, so it can already be set by the user
    • in the example --btn-rest-fg is set for the whole theme, but it can be used for individual buttons also
  • a checkable button cannot be identified as checked/unchecked when focused
  • setting --btn-color and ``--btn-fg` on buttons does not work as expected

close #4430

Organize styles so that there is very little need for duplication.
The only styles that do not work with tailwind responsive modifiers are the ones for disabled .btn-link and .btn-ghost.

see saadeghi#4430
@saadeghi saadeghi self-assigned this Feb 9, 2026
@saadeghi saadeghi added the 5.6 label Feb 28, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug: buttons with low contrast, aria-disabled support, buttons in filter

2 participants