How to add custom classes to a custom button in TinyMCE? - tinymce

Question

I want to add a custom class to a custom button in TinyMCE 6, however it doesn't seem to be possible anymore.
const setup = (editor: Editor, url: string): void => {
editor.ui.registry.addButton('blue-box', {
icon: 'table-cell-select-all',
class: 'MyCoolBtn',
tooltip: "Blue Box",
onAction: () => {
editor.setContent('<p>content added from blue-box</p>');
}
});
};
In this example, I tried to add class: MyCoolBtn, however, I received an error because there's no class instance on the addButton method.
Is there any possibility to add a class or add a custom design to specific buttons in TinyMce 6?

Answer 1

Looking through the Tiny 6 and Tiny 5 docs, I couldn't find a reference to the addButton API allowing a class value (sounds like a function from Tiny 4 or earlier?).
Anyway, I tested out the custom button, in Tiny 6 on a fiddle with your example button, and again in a local file, I while I didn't get any errors about a class instance not found for the addButton method, I did find that adding a class to the button was not carried through the rendered rich text editor. When Tiny runs, it adds classes to each element based on the CSS content specified by the default skin configured.
It is possible to override the .tox classes that the Tiny skin places for each element (as seen in the screen cap), but it's not recommended.
One solution, if you want to change the style of the specific, custom buttons added to the toolbar, is to make a custom skin with the specific style element needed set up and targeting that .tox-tbtn class.