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.
0%
/

See also