HeroUI Version

@heroui/[email protected]

Describe the bug

When extending a base component with your own stylings through extendVariants helper, providing defaultVariants sets defaults for those keys in the object, except className.

Looking at this line, for base components such as Button (with no slots), will override the given className.

A suggested solution as easy as follows:

if (!hasSlots) {
    newProps.className = clsx(result, props.className ?? defaultVariants.className);
  }

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. import any base simple component such as Button.
2. import extendVariants
3. Copy and paste (extend at your own will for other applicable props):

export const ActionButton = extendVariants(Button, {
  defaultVariants: {
    className: 'w-full text-medium rounded-small',
    // For the sake of example totally not needed to test against
    color: 'primary',
    variant: 'solid',
  },
});

4. Run your application and inspect that element and confirm that class attribute doesn't include the given className.

Expected behavior

The defaultVariants key-value pairs to be fully respected unless props are given, including className.

Screenshots or Videos

No response

Operating System Version

Windows

Browser

Chrome