how to disable a button added by a plugin in gutenberg toolbar?

Question

I am trying to disable a gutenberg toolbar button added by myself following this tutorial. https://developer.wordpress.org/block-editor/tutorials/format-api/2-toolbar-button/

But there is no docs for disabling the toolbar button, i have tried to fiddle with isActive property of that button, setting it to true or false doesnt seem to have effect on toolbar button. There seems to be nothing in docs explaining this condition, I need a way to disable the toolbar button

Answer 1

I have found that you could add a className attribute to the button and select the button by document.getElementsByClassName query selector. so the code would be this

( function( wp ) {
    var MyCustomButton = function( props ) {
        return wp.element.createElement(
            wp.editor.RichTextToolbarButton, {
                icon: 'editor-code',
                title: 'Sample output',
                className: "foo"
                onClick: function() {
                    console.log( 'toggle format' );
                },
            }
        );
    }
    wp.richText.registerFormatType(
        'my-custom-format/sample-output', {
            title: 'Sample output',
            tagName: 'samp',
            className: null,
            edit: MyCustomButton,
        }
    );
} )( window.wp );

with className foo added to the button.