className Prop Doesn't Apply to Button Element in ToggleButton

[myigituzun]

Describe the bug

I expected the following code to apply the className dynamically based on the checked state of the ToggleButton:

import { useState } from 'react';
import { ToggleButton } from 'primereact/togglebutton';
import { classNames } from 'primereact/utils';

const MyComponent = () => {
  const [checked, setChecked] = useState(false);

  return (
    <div className={'flex flex-col items-center justify-center h-screen text-center'}>
      <ToggleButton
        className={classNames({ 'bg-red-800': checked, 'bg-yellow-600': !checked })}
        checked={checked}
        onClick={() => setChecked(!checked)}
      />
    </div>
  );
};

export default MyComponent;

However, when I rendered this component, the visual result didn’t match my expectations.
Here is the screenshot for reference:

I realized that the background color for the button is not changing as expected based on the checked state. After inspecting the DOM structure, I found that the className prop is being applied to the wrapper element (the input and button container), instead of the actual element.

This behavior makes it difficult to directly style the button’s appearance based on its checked state.

Observed Behavior

The className prop is currently applied to the wrapper element, which prevents the desired styling of the button’s background.

Reproducer

No response

System Information

System:
    OS: macOS 15.2 (24C101)
    Chip: Apple M4 Pro
  Binaries:
    Node: 22.12.0
    yarn: 4.5.3
  Browsers:
    Brave: Version 1.74.48 Chromium: 132.0.6834.83 (Official Build)  (arm64)
  npmPackages:
    primereact: 10.9.1
    react: 19.0.0
    tailwindcss: 3.4.17

Steps to reproduce the behavior

1. Use the code snippet above in a React project with PrimeReact.
2. Observe the rendered ToggleButton in the browser.
3. Check the DOM structure and see where the className prop is applied.

Expected behavior

The className prop should ideally be applied to the

element itself so that styling can be dynamically adjusted based on the checked state.