SPFx disable TABs/Pivots

For many business requirements we have to implement a TAB control in our webparts. As I am fan of Office UI fabric controls alias FluentUI, I used Pivot control

https://developer.microsoft.com/en-us/fluentui#/controls/web/pivot

But unfortunately, the pivot control doesn’t have a disable feature in it. As I don’t want to go out of office controls so after googling found this round work of using “headerButtonProps ”. Again, one more observation/issue in this first time if we use it with “” the tabs are not disabled so implement without that first and then replace.

First do with this empty pivot tag at top and do gulp serve, your tab will load

It will load like this

Later then change it to below to have the TAB kind of UI

Which will load this with TAB UI and all tabs disabled except the first one. To enable the all Tabs click the button inside tab one.

Happy learning. Thanks for reading. #sharingiscaring.