# 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="https://26372517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbFVf8kVEpyVUCqsdCO3p%2Fuploads%2FzIh0U8r2y0T0FYRg6Sxp%2FBild_2023-08-01_144219794.png?alt=media&#x26;token=f4c74723-ae98-48cb-b0ed-704ad1dcbff1" 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.