Skip to content

[6.x] Merge external class attrs through twMerge in UI components#14379

Merged
jasonvarga merged 1 commit into6.xfrom
btn-twmerge-class-attrs
Mar 27, 2026
Merged

[6.x] Merge external class attrs through twMerge in UI components#14379
jasonvarga merged 1 commit into6.xfrom
btn-twmerge-class-attrs

Conversation

@jasonvarga
Copy link
Copy Markdown
Member

@jasonvarga jasonvarga commented Mar 27, 2026

Summary

  • Button, Badge, and Toggle/Item components now use inheritAttrs: false and route attrs.class through twMerge, so externally-applied Tailwind classes properly override internal ones instead of being simply concatenated by Vue's default merge strategy.
  • Non-class attrs (data-*, aria-*, event listeners, etc.) are still passed through via v-bind="restAttrs".

Test plan

  • Verify that adding a class like rounded-none to <Button> properly overrides the internal rounded-lg
  • Verify that adding classes to <Badge> and <Toggle.Item> similarly override internal classes
  • Verify that non-class attrs (e.g. data-testid, aria-label) still pass through to the root element

🤖 Generated with Claude Code

Button, Badge, and Toggle/Item now use inheritAttrs: false and pass
attrs.class into twMerge so externally-applied Tailwind classes properly
override internal ones instead of being concatenated by Vue.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@jasonvarga jasonvarga merged commit cfbc771 into 6.x Mar 27, 2026
23 checks passed
@jasonvarga jasonvarga deleted the btn-twmerge-class-attrs branch March 27, 2026 19:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant