FalkonTutorials/qml/articles/3.Adding_a_button_to_the_toolbar.md

# Falkon QML Tutorial - 3. Adding a button to the toolbar

In this chapter will be shown how to add Simple button to the toolbar
and statusbar.


## Create button

The button in QML is represented by `Falkon.BrowserAction` and will be 
automatically added to all windows. At the moment of writing this 
article the button shares the same instance with all windows and thus 
per window modifications are impossible (would be very inconsistent|.

```qml
Falkon.BrowserAction {
    name: 'QML Tutorial 3'
    identity: 'qml-tutorial-3-id'
    title: i18n('Qml Tutorial 3')
    toolTip: i18n('My little button')
    icon: 'falkon'
    location: Falkon.BrowserAction.NavigationToolBar | Falkon.BrowserAction.StatusBar
    onClicked: someFunctions()
    popup: Rectangle {
        width: 100;
        height: 100;
    }
}
```

### Falkon.BrowserAction
The interface class for Falkon buttons.

#### identity
This identity will be used by Falkon when you add the button to toolbar
to determinate its place in the toolbar.

#### name
The name which will be displayed in "Configure toolbar" dialog.

#### title
I did not find a sensible use for this function in the Falkons code yet.

#### toolTip
The buttons tooltip which will be displayed when you hover with mouse over the button.

#### badgeText
The text in a form of a badge over the button.  
Used by **AdBlock** plugin to show how many item it blocked.

#### icon
Icon used for the button. If the icon is not specified the button will
be left blank. The icon can either be name of system icon or a filename,
in case of using filename the file should be provided together with the
extension.

#### position
Configure where should the button be added.  
In case of adding button to the toolbar in will only appear as available
in the toolbar customize menu and user has to add it to the toolbar
manualy. For statusbar the button will appear in the statusbar
immediately but the order of icons cannot be customized at the moment.

#### onClicked
Called when the mouse click on the button.  
Somehow handled by QML, it might be possible to add mouse hover
detection and maybe some other things as well, I did not try that
though.


## Example
The example code will add a button to main toolbar and statusbar. When
user clicks on the button the small white rectangle will show up and the
number displayed on the badge will increase.

![Toolbar button with badge and empty popup](../images/tutorial3/toolbar_button_with_badge_and_popup.png)

### Code
The code for this example can be found at
[extensions/qml_tutorial_3](../extensions/qml_tutorial_3)