When creating large projects or ones where you need full customization, it is usually a good practice to recreate the basic UI components according to the design system of the project. When creating these basic UI components, we usually create a disabled variant of button, input etc… These are usually styled by adding another class and then styling that class according to the design system and then disabling the click-handler and removing the cursor: pointer; from it and optionally using cursor: not-allowed;. And for this, we repeat the same code again and again or need to create a mixin (if using a SCSS). What if I tell you that there’s an easier way to style the disabled state of the elements together without needing to redefine the same styles again and again… Well, that’s exactly what we will be going to look in this article.
Toggling the disabled state of the element
Instead of disabling the click handler or removing it depending on the disabled variant, use the disabled HTML attribute which gets toggled based on the variant.
<button onclick="clickHandler()" disabled={variant === 'disabled'}>
Hello world
</button>Here, if the variant prop passed is disabled then the disabled attribute will be set to true, else false is passed to disabled…
