@Armando_Bollain Thanks for your response. It’s helped me achieve something similar however I’ve pushed two buttons to the header (Single and Double page button) but I’ve found that the active className doesn’t get applied to it. How would I go about doing this so that when you click on the button, it has the active styles applied to it?
const singlePageButton = {
type: 'actionButton',
img: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#abb0c4;}</style></defs><title>icon - header - page manipulation - page layout - single page - line</title><path class="cls-1" d="M20,8.94a2,2,0,0,0,0-.26.36.36,0,0,0,0-.09,1.17,1.17,0,0,0-.19-.3l-6-6a1.17,1.17,0,0,0-.3-.19l-.09,0L13.06,2H6A2,2,0,0,0,4,4V20a2,2,0,0,0,2,2H18a2,2,0,0,0,2-2V9S20,9,20,8.94ZM6,20V4h6V9a1,1,0,0,0,1,1h5V20Z"/></svg>`,
onClick: () => {
instance.UI.setLayoutMode(instance.UI.LayoutMode.Single);
},
title: 'Single Page',
};
const doublePageButton = {
type: 'actionButton',
img: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#abb0c4;}</style></defs><title>icon - header - page manipulation - page layout - double page - line</title><path class="cls-1" d="M11,10.13s0,0,0-.05a1,1,0,0,0-.11-.17L7.46,6.54a.57.57,0,0,0-.16-.11l-.06,0-.14,0h-4A1.12,1.12,0,0,0,2,7.5v9a1.12,1.12,0,0,0,1.13,1.12H9.88A1.12,1.12,0,0,0,11,16.5V10.28A.4.4,0,0,0,11,10.13ZM3.13,16.5v-9H6.5v2.81a.57.57,0,0,0,.56.57H9.88V16.5ZM22,10.28a.4.4,0,0,0,0-.15s0,0,0-.05a1,1,0,0,0-.11-.17L18.46,6.54a.57.57,0,0,0-.16-.11l-.06,0-.14,0h-4A1.12,1.12,0,0,0,13,7.5v9a1.12,1.12,0,0,0,1.13,1.12h6.74A1.12,1.12,0,0,0,22,16.5V10.28ZM14.13,16.5v-9H17.5v2.81a.57.57,0,0,0,.56.57h2.81V16.5Z"/></svg>`,
onClick: () => {
instance.UI.setLayoutMode(instance.UI.LayoutMode.Facing);
},
title: 'Double Page',
};
UI.setHeaderItems((header) => {
header.push(singlePageButton, doublePageButton);
});