Example: Create a toolbar with custom buttons for the default layout

This example demonstrates how we can build a custom toolbar that is created by the Default Layout plugin.

const renderToolbar = (Toolbar: ((props: ToolbarProps) => ReactElement)) => (
    <Toolbar>
    {
        (slots: ToolbarSlot) => {
            const {
                ZoomOut,
            } = slots;
            return (
                <div
                    style={{
                        alignItems: 'center',
                        display: 'flex',
                    }}
                >
                    <div style={{ padding: '0px 2px' }}>
                        /* Custom zoom out button */
                        <ZoomOut>
                        {
                            (props) => (
                                <button
                                    style={{
                                        backgroundColor: '#357edd',
                                        border: 'none',
                                        borderRadius: '4px',
                                        color: '#ffffff',
                                        cursor: 'pointer',
                                        padding: '8px',
                                    }}
                                    onClick={props.onClick}
                                >
                                    Zoom out
                                </button>
                            )
                        }
                        </ZoomOut>
                    </div>
                    ...
                </div>
            )
        }
    }
    </Toolbar>
);

const defaultLayoutPluginInstance = defaultLayoutPlugin({
    renderToolbar,
});

Take a look at this example to know more about customizing slots of the toolbar.

(The sample code)

Related examples