[BUG] - ButtonGroup with extendVariants CustomButton applies wrong border-radius (outer corners instead of inner)

[RomainLAU]

HeroUI Version

2.8.8

Describe the bug

When using ButtonGroup with a custom button created via extendVariants (extending Button), the border-radius is applied to the wrong corners:

The outer corners of the group are set to 0 (square),
The inner corners (the ones between the buttons) keep their default radius and are not squared.
Concretely:

The first (left) button has its top-left and bottom-left corners set to 0.
The second (right) button has its top-right and bottom-right corners set to 0.
The inner corners (top-right/bottom-right of the first button, top-left/bottom-left of the second button) remain rounded, instead of being squared as expected in a button group.
This is the opposite of the expected behavior: the inner corners (between buttons) should lose their radius, and the outer corners should stay rounded.

<ButtonGroup>
  <CustomButton
    isLoading={loading}
    size="xs"
    spinner={<Spinner size="sm" />}
    startContent={<MagicStick3 size={16} />}
    variant="secondary"
    onPress={handleGenerate}
  >
    {loading ? t("budy.generating") : t("budy.generate")}
  </CustomButton>

  {replyOptionsData && (
    <Dropdown>
      <DropdownTrigger>
        <CustomButton isIconOnly size="xs" variant="secondary">
          <Settings />
        </CustomButton>
      </DropdownTrigger>

      <DropdownMenu
        aria-label="Review reply AI tone"
        onAction={(key) => setReviewReplyTone(key as string)}
      >
        {replyOptionsData?.templates?.[0]?.options?.map((option) => (
          <DropdownItem key={option.key}>
            {t(`campaigns.generate_option.${option.key}`)}
          </DropdownItem>
        ))}
      </DropdownMenu>
    </Dropdown>
  )}
</ButtonGroup>

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Create a CustomButton component using extendVariants(Button, …).
2. Render two CustomButtons inside a ButtonGroup, side by side (e.g. one normal button and one isIconOnly button).
3. Inspect the rendered buttons’ border-radius.
4. Observe that the outer corners are squared and the inner corners remain rounded.

Expected behavior

1. Only the inner corners between buttons in the ButtonGroup should have their border-radius removed (squared).
2. The outer corners of the first and last buttons in the group should keep their normal radius.
3. Using a custom button that extends Button via extendVariants should behave the same as using the core Button directly inside ButtonGroup.

Screenshots or Videos

Operating System Version

macOS

Browser

Chrome