# addToolbarButton

As we have already discussed in documentation of SetToolbarButtonMode. These are several buttons that are provided by Brixxbox for each app like adding new record, saving new record etc. These buttons provides general functionality needed by most of the apps but in case your app needs extra functionality, Brixxbox also allows this. It is provided by brixxApi function **addToolbarButton**. It takes a JSON object as a parameter. This JSON contains all the properties that defines this custom button as well as the functionality provided by it. The properties include name, id, and function to execute on clicking this button etc. Adds a custom button to the app toolbar.

#### Example

```javascript
   brixxApi.addToolbarButton({
            title: "Print Invoice",
            icon: "print",
            id: "printInvoiceToolbarButton",
            onclick: async function () {
                brixxApi.triggerEvent("click", "printInvoiceBtn");
            }
        });
```

### Parameters

1. toolbarButtonOptions - It is a JSON Object. In JSON object we passes parameters in the form of key value arguments.It include properties like name, id, function, etc.

### Example Usages

As we have already seen a minimal custom print button in above example. Lets now add extra properties like group, css class, and shortcut for our print button. Now we also want this button to be added in our app toolbar on initialization. For this purpose goto current app properties and add **onAppInitialized** event. Now we need to add following code as a custom code to this event.

```javascript
   brixxApi.addToolbarButton({
            title: "Print Invoice",
            icon: "print",
            text: "Rechnung drucken",
            group: "invoice",
            id: "printInvoiceToolbarButton",
            cssClass: "btn-success",
            onclick: async function () {
                brixxApi.triggerEvent("click", "printInvoiceBtn");
            },
            shortcut: "Ctrl-Alt-P"
        });
```

Now when our app is initialized, we can see our custom button on the app toolbar and it should look like this. 

<figure><img src="/files/dAvMI9ZgH5NkuHj7eUlV" alt=""><figcaption><p>Example of the Button</p></figcaption></figure>

We can also add different custom buttons to our app depending upon our own requirements.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://brixxbox.gitbook.io/brixxbox-documentation/client-api-reference/functions/addtoolbarbutton.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.