v8.82.6

Styling the export button

This example shows some changes we can make to the Done button to make it fit our project.

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    /* Adjust the primary brand color of the editor */
    .pintura-editor {
        --color-primary: #2196f3;
        --color-primary-dark: #157bcb;
        --color-primary-text: #fff;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor, findNode } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',

        // Move the toolbar to the bottom of the editor
        layoutVerticalToolbarPreference: 'bottom',

        // Intercept toolbar render call and adjust export button properties
        willRenderToolbar: (toolbar) => {
            // get the export button
            const exportButton = findNode('export', toolbar);

            // get a reference to the options
            const exportButtonOptions = exportButton[2];

            // show the label
            exportButtonOptions.hideLabel = false;

            // disable the icon
            exportButtonOptions.icon = false;

            // return the toolbar for drawing
            return toolbar;
        },
    });
</script>