Custom Tab - Disabled state doesn't work

[k-1ee]

Description

When implementing a custom tab component, setting isDisabled does not show the tab's disabled state.

In the docs, you can see that adding isDisabled does not work for custom tab components. I'm suspecting that the __css prop (which contains the disabled styles) is overridden by Button styles.

Link to Reproduction

https://codesandbox.io/p/sandbox/brave-frost-9j47mx?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clv5kbsd400063b6hrhwjczwv%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clv5kbsd300023b6h9tfkjxve%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clv5kbsd300033b6hjb174sco%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clv5kbsd400053b6hrbtchht4%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clv5kbsd300023b6h9tfkjxve%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clv5kbsd300013b6hiefyp6uv%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clv5kbsd300023b6h9tfkjxve%2522%252C%2522activeTabId%2522%253A%2522clv5kbsd300013b6hiefyp6uv%2522%257D%252C%2522clv5kbsd400053b6hrbtchht4%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clv5kbsd400043b6h73k0sffk%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clv5kbsd400053b6hrbtchht4%2522%252C%2522activeTabId%2522%253A%2522clv5kbsd400043b6h73k0sffk%2522%257D%252C%2522clv5kbsd300033b6hjb174sco%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clv5kbsd300033b6hjb174sco%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Steps to reproduce

1. Wire up custom tab component (follow docs)
2. Add isDisabled prop to custom tab
3. See that disabled state does not appear

Chakra UI Version

2.3.6

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[Saloni-hub]

we can add customClass for resolving this issue like this

import * as React from "react";
import * as ReactDOMClient from "react-dom/client";
import {
Box,
ChakraProvider,
useTab,
Tabs,
TabList,
TabPanels,
TabPanel,
Button,
} from "@chakra-ui/react";

function CustomTab({ children, isDisabled, ...rest }) {
const tabProps = useTab(rest);
const isSelected = !!tabProps["aria-selected"];

// Determine custom class based on selection and disabled state
const customClass = custom-tab ${isSelected ? "selected" : ""} ${ isDisabled ? "disabled" : "" };

return (
<Button {...tabProps} className={customClass} isDisabled={isDisabled}>

{isSelected ? "😎" : "😐"}

{children}

);
}

function CustomTabs() {
return (


One
Two


1
2


);
}
function App() {
return (



);
}

const rootElement = document.getElementById("root");
const root = ReactDOMClient.createRoot(rootElement);

root.render(
<React.StrictMode>



</React.StrictMode>
);

also u can modify useTab props for resolving above issue

[k-1ee]

@Saloni-hub - Using className with Chakra components seems like an anti-pattern.

Instead, explicitly forwarding isDisabled to the Button wrapper may be a potential fix, but curious to hear from maintainers.

In its current state, the Custom Tabs section in Chakra docs contains a bug in that disabling the custom tab does not produce expected behavior.