# Styling the export button
This example shows some changes we can make to the Done button to make it fit our project.
* [ JavaScript](#javascript-panel-0)
* [ React](#react-panel-0)
* [ Vue](#vue-panel-0)
* [ Svelte](#svelte-panel-0)
* [ Angular](#angular-panel-0)
* [ jQuery](#jquery-panel-0)
* [index.html](#index-html-panel-0)
```html
```
* [App.jsx](#App-jsx-panel-0)
* [App.css](#App-css-panel-0)
```jsx
import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults, findNode } from '@pqina/pintura';
const editorDefaults = getEditorDefaults();
function App() {
const willRenderToolbar = (toolbar) => {
// get the export button
const exportButton = findNode('export', toolbar);
// get a reference to the options
const exportButtonOptions = exportButton[2];
// @ts-ignore - show the label
exportButtonOptions.hideLabel = false;
// @ts-ignore - disable the icon
exportButtonOptions.icon = false;
// return the toolbar for drawing
return toolbar;
};
return (
);
}
export default App;
```
```css
/* Adjust the primary brand color of the editor */
.pintura-editor {
--color-primary: #2196f3;
--color-primary-dark: #157bcb;
--color-primary-text: #fff;
height: 600px;
}
```
* [App.vue](#App-vue-panel-0)
```html
```
* [App.svelte](#App-svelte-panel-0)
```svelte
```
* [app.component.ts](#app-component-ts-panel-0)
* [app.component.html](#app-component-html-panel-0)
* [app.component.css](#app-component-css-panel-0)
* [app.module.ts](#app-module-ts-panel-0)
```javascript
import { Component } from '@angular/core';
import { getEditorDefaults, findNode, PinturaNode } from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
editorDefaults: any = getEditorDefaults();
// Intercept toolbar render call and adjust export button properties
willRenderToolbar = (toolbar: any): PinturaNode[] => {
// get the export button
const exportButton = findNode('export', toolbar);
// get a reference to the options
const exportButtonOptions = exportButton[2];
// @ts-ignore - show the label
exportButtonOptions.hideLabel = false;
// @ts-ignore - disable the icon
exportButtonOptions.icon = false;
// return the toolbar for drawing
return toolbar;
};
}
```
```html
```
```css
/* Adjust the primary brand color of the editor */
::ng-deep .pintura-editor {
--color-primary: #2196f3;
--color-primary-dark: #157bcb;
--color-primary-text: #fff;
height: 600px;
}
```
```javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AngularPinturaModule],
exports: [AppComponent],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
* [index.html](#index-html-panel-0)
```html
```