Using Button from Wordpress components does not work when used for frontend

Question

I recently started working with custom blocks and I have created a simple static custom block. Block setup works and block can be added to the block editor. But when I save it and preview it, the block is not shown and the block editor cannot be reloaded due to an error. Editor completely broken after this showing a white screen. How we use Button component inside save component? (I use this with theming so I can get the button theme setting for the frontend.).

import { registerBlockType } from '@wordpress/blocks';
import { Button } from '@wordpress/components';

registerBlockType('mynamespace/buttontest', {
    title: 'mynamespace/buttontest',
    edit: () => {
        return (
            <Button>Test</Button>
        );
    },
    save: () => {
        return (
            <Button>Test2</Button>
        );
    }
})

This yields following errors when I saved.

react-dom.min.js?ver=18.2.0:10 Error: Minified React error #300; visit https://reactjs.org/docs/error-decoder.html?invariant=300 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at wt (react-dom.min.js?ver=18.2.0:10:47841)
    at vr (react-dom.min.js?ver=18.2.0:10:56452)
    at js (react-dom.min.js?ver=18.2.0:10:121453)
    at wl (react-dom.min.js?ver=18.2.0:10:88659)
    at bl (react-dom.min.js?ver=18.2.0:10:88587)
    at yl (react-dom.min.js?ver=18.2.0:10:88450)
    at il (react-dom.min.js?ver=18.2.0:10:85274)
    at fl (react-dom.min.js?ver=18.2.0:10:85661)
    at Nn (react-dom.min.js?ver=18.2.0:10:32474)
    at react-dom.min.js?ver=18.2.0:10:83226

When I refresh the editor, the content is not saved and following error pops up.

blocks.min.js?ver=7204d43123223474471a:10 Block validation: Block validation failed for `mynamespace/buttontest` (Object).

Content generated by `save` function:

<div role="group" class="components-button-group"><button type="button" class="components-button">Test2</button></div>

Content retrieved from post body:


(anonymous) @ blocks.min.js?ver=7204d43123223474471a:10

and

Error: Switching useSelect from mapping to mapping is not allowed
    at Qe (data.min.js?ver=dc5f255634f3da29c8d5:9:2838)
    at Ys (editor.min.js?ver=3f5791ae786456067a27:12:140050)
    at editor.min.js?ver=3f5791ae786456067a27:12:142736
    at wt (react-dom.min.js?ver=18.2.0:10:47637)
    at vr (react-dom.min.js?ver=18.2.0:10:56452)
    at js (react-dom.min.js?ver=18.2.0:10:121453)
    at wl (react-dom.min.js?ver=18.2.0:10:88659)
    at bl (react-dom.min.js?ver=18.2.0:10:88587)
    at yl (react-dom.min.js?ver=18.2.0:10:88450)
    at il (react-dom.min.js?ver=18.2.0:10:85274)

Answer 1

This isn't how the WordPress components are supposed to be used. The components from @wordpress/components are meant for use in the admin, typically for creating a UI in the block editor. See how the package is described in the documentation (emphasis mine):

This package includes a library of generic WordPress components to be used for creating common UI elements shared between screens and features of the WordPress dashboard.

One of the uses for this is to create elements that use the styles of the WordPress admin. If you expected this component to use your theme's button styles on the front-end, then you're mistaken.

If you want a display a button in your block that matches your theme's styles (assuming a modern block-based theme) then you should just use the normal HTML, but with the wp-element-button class:

import { registerBlockType } from '@wordpress/blocks';

registerBlockType('mynamespace/buttontest', {
    title: 'mynamespace/buttontest',
    edit: () => {
        return (
            <button className="wp-element-button">Test</button>
        );
    },
    save: () => {
        return (
            <button className="wp-element-button">Test2</button>
        );
    }
})