JavaScript/jQuery Popup - toolbarItems

$(function() {
    $("#popupContainer").dxPopup({
        // ...
        toolbarItems: [{
            text: "Title",
            location: "before"
        }, {
            widget: "dxButton",
            location: "after",
            options: { 
                text: "Refresh", 
                onClick: function(e) { /* ... */ }
            }
        }]
    });
});

<div id="popupContainer">
    <p>Popup content</p>
</div>

<dx-popup ... >
    <div *dxTemplate="let data of 'content'">
        <p>Popup content</p>
    </div>
    <dxi-toolbar-item
        text="Title"
        location="before">
    </dxi-toolbar-item>
    <dxi-toolbar-item
        widget="dxButton"
        location="after"
        [options]="{
            text: 'Refresh',
            onClick: refresh
        }">
    </dxi-toolbar-item>
</dx-popup>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    refresh () { /* ... */ }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxPopupModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxPopupModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

<template> 
    <dx-popup ... >
        <p>Popup content</p>
        <dx-toolbar-item 
            text="Title" 
            location="before">
        </dx-toolbar-item>
        <dx-toolbar-item 
            widget="dxButton" 
            :options="buttonOptions" 
            location="after">
        </dx-toolbar-item>
    <dx-popup>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxPopup, { DxToolbarItem } from 'devextreme-vue/popup';

export default {
    components: {
        DxPopup
    },
    data() {
        return {
            buttonOptions: {
                text: 'Refresh',
                onClick: function(e) { /* ... */ }
            }
        }
    }
}
</script>

<template> 
    <dx-component />
</template>

<script>
import DxComponent from './components/DxComponent';

export default {
    components: {
        DxComponent
    }
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Popup, ToolbarItem } from 'devextreme-react/popup';

class DxComponent extends React.Component {
    constructor() {
        this.buttonOptions = {
            text: 'Refresh',
            onClick: function(e) { /* ... */ }
        };
    }
    render() {
        return (
            <Popup ... >
                <p>Popup Content</p>
                <ToolbarItem 
                    text="Title" 
                    location="before">
                </ToolbarItem>
                <ToolbarItem 
                    widget="dxButton" 
                    location="after" 
                    options={this.buttonOptions}>
                </ToolbarItem>
            </Popup>
        );
    }
}
export default DxComponent;

import React, { Component } from 'react';
import './App.css';

import DxComponent from './DxComponent';

class App extends Component {
    render() {
        return (
            <div>
                <DxComponent />
            </div>
        );
    }
}

export default App;