isDisabled prop
Every component now supports isDisabled
prop which will set buttons / iconButtons to chakra isDisabled=true
and manually lower the opacity and make Link
disabled.
This will also remove linking functionality (useful for i.e. pagination)
const Foo = () => {
const id = useCurrentIndex();
return (
<VStack>
<LinkButton href={`/page?index=${id - 1}`} isDisabled={id <= 0}>
Previous
</LinkButton>
<LinkButton href={`/page?index=${id + 1}`} isDisabled={id >= 10}>
Next
</LinkButton>
</VStack>
);
};
This is kinda breaking change / kinda fixing the API that was broken.
Before isDisabled on Button/IconButton would show a disabled button but not actually disable linking functionality