Add toolbar button

This example shows how to add a button on the toolbar. Just click on any block to see the button. See more about Button API.


    <!DOCTYPE html>
        <title>Redactor X</title>
        <meta charset="utf-8">
        <!-- css -->
        <link rel="stylesheet" href="/your-dist-path/redactorx.min.css" />
        <!-- font awesome -->
        <link rel="stylesheet" href="">
        <!-- element -->
        <textarea id="entry">
        <!-- js -->
        <script src="/your-dist-path/redactorx.min.js"></script>
        <!-- call -->
        // Create a plugin
        RedactorX.add('plugin', 'myplugin', {
            start: function() {
      'mybutton', {
                    title: 'My Button',
                    icon: '<i class="fa fa-superpowers"></i>',
                    command: 'myplugin.toggle'
            toggle: function(params, button) {
                alert('Button Toggle');
        // Call with plugin
        RedactorX('#entry', {
            plugins: ['myplugin']


    In the example, the button is added as HTML, you can also add it as svg:'mybutton', {
        title: 'My Button',
        icon: '<svg>...</svg>',
        command: 'myplugin.toggle'