# How to add custom button to top toolbar

This guide shows how to add buttons to the [top toolbar] using the following methods:

- `createDropdown` — creates a [dropdown menu](#add-a-dropdown-button).
- `createButton` — creates a [customizable button](#add-a-custom-button).

See the Pen 
  [WIP] Add custom button to top toolbar by TradingView (@tradingview)
  on CodePen.

## Before you start

Consider taking the following steps before proceeding with the guide:

1. Set up the Widget Constructor and run the library. Refer to the [Quick start] for more information.
2. Connect data to the library. Refer to the [Connecting data] tutorial for more information.

## Add a dropdown button

1. Call the widget's [`headerReady`] method that ensures the toolbar is fully loaded before adding custom elements.
    The method returns a promise that will be resolved once the chart’s top toolbar is available for customization.

    ```js
    widget.headerReady().then(function () {});
    ```

2. Use the widget's [`createDropdown`] method to add a dropdown button to the top toolbar.
    This button will [set a symbol] on the chart.

    ```js
    widget.headerReady().then(function () {
        var dropdown = widget.createDropdown({
        title: "Select symbol",
        tooltip: "Select one of the symbols to load the chart with",
        items: [
            {
                title: "MSFT",
                onSelect: () => {
                    widget.activeChart().setSymbol("MSFT");
                }
            },
            {
                title: "IBM",
                onSelect: () => {
                    widget.activeChart().setSymbol("IBM");
                }
            }
        ]
        });
    });
    ```

## Add a custom button

1. Call the widget's [`headerReady`] method that ensures the toolbar is fully loaded before adding custom elements.
    The method returns a promise that will be resolved once the chart’s top toolbar is available for customization.

    ```js
    widget.headerReady().then(function () {});
    ```

2. Use the widget's [`createButton`] method to add a button that triggers a confirmation dialog when clicked.
    The widget's [`showConfirmDialog`](../../api/interfaces/Charting_Library.IChartingLibraryWidget.md#showconfirmdialog) method displays a dialog box with a title, body text, and two buttons: *Yes* and *No*.

    ```js
    widget.headerReady().then(function () {
        var button = widget.createButton();
        button.textContent = "Show dialog";
        button.addEventListener("click", function () {
            widget.showConfirmDialog({
                title: "Accept Terms and Conditions",
                body: "By selecting Yes, you agree to the terms of use. Otherwise, select No to cancel.",
            }).then(function(result) {
                result ? console.log("The terms are accepted.") : console.log("The terms are not accepted.");
            });
        });
    });
    ```

3. **(Optional)** If you're a [Trading Platform] user, you can alternatively use the [`showConfirmDialog`](../../api/interfaces/Charting_Library.IBrokerConnectionAdapterHost.md#showconfirmdialog) method within the [`IBrokerConnectionAdapterHost`] interface.

    1. Use the widget's [`createButton`] method to add a button that triggers a confirmation dialog when clicked.

        ```js
        widget.headerReady().then(function () {
            var buttonTwo = widget.createButton(); // Create a button
            buttonTwo.textContent = "Show dialog 2"; // Add the button title
            buttonTwo.addEventListener("click", function () {
                window.broker.showDialog(); // Trigger a custom dialog on click
            });
        });
        ```

    2. Define the `showDialog` method in the constructor of your [Broker API] class.

        ```js
        async showDialog() {
            const actionConfirmed = await this.host.showConfirmDialog(
                "Confirm action", // Dialog title
                [
                "This action cannot be undone. Please confirm to continue.",
                "Otherwise, you may close this dialog to retain the current settings."
                ], // Dialog content
                "Confirm", // Text for the button that returns true
                "Dismiss"  // Text for the button that returns false
            );
            if (actionConfirmed) {
                console.log("Action was confirmed.");
            } else {
                console.log("Action was not confirmed.");
            }
        }
        ```

## What's next?

If you want to dive deeper into how to customize the chart, we recommend checking the following documentation articles:

- [Customization overview](https://charting-library-docs.xstaging.tv/latest/customization.md)
- [UI elements overview](https://charting-library-docs.xstaging.tv/latest/ui_elements.md)

[Broker API]: https://charting-library-docs.xstaging.tv/latest/trading_terminal/trading-concepts.md#broker-api
[Connecting data]: https://charting-library-docs.xstaging.tv/latest/tutorials/tutorials/implement_datafeed_tutorial.md
[Quick start]: https://charting-library-docs.xstaging.tv/latest/quick-start.md
[set a symbol]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartWidgetApi#setsymbol
[top toolbar]: https://charting-library-docs.xstaging.tv/latest/ui_elements.md#top-toolbar
[Trading Platform]: https://charting-library-docs.xstaging.tv/latest/trading_terminal.md

[`createButton`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartingLibraryWidget#createbutton
[`createDropdown`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartingLibraryWidget#createdropdown
[`headerReady`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartingLibraryWidget#headerready
[`IBrokerConnectionAdapterHost`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IBrokerConnectionAdapterHost

---

## Sitemap

- [All documentation pages](https://charting-library-docs.xstaging.tv/llms.txt)
- [Full page map with headings](https://charting-library-docs.xstaging.tv/docs_map.md)