This is a simple button that can have an icon. Button can have two states and a badge with a number, which can be useful for displaying the number of new messages, etc.

Related sample:  Toolbar. Buttons

Adding Button

A button can be easily added to a toolbar with the help of the add() method of Tree Collection:

    type:"button", value:"Best button"


You can provide the following attributes in the configuration object of a button:

Adding an icon

A button can have an icon which is set through the corresponding option icon:

    type:"button", value:"Done",
    icon:"dxi dxi-check"

Adding a badge with a number

You can add a number badge to the button to display information like the number of new messages. The badge is set via the count property:

    type:"button", value:"Done",
    icon:"dxi dxi-check",

Adding HTML content

You can add any custom HTML content to a button with the help of the html property:

    type: "button",
    html: "<div class='user-button'><img src='../avatars/Avatar.jpg'/></div>",

Related sample:  Toolbar. Item HTML Content

Showing/hiding a button

To hide/show a button, you should pass the ID of the button to the hide() / show() Toolbar methods:


Related sample:  Toolbar. Hide/Show

Enabling/disabling a button

Any button in the toolbar can be enabled/disabled:


Related sample:  Toolbar. Enable/Disable

Setting tooltip

You can add a tooltip to a button:

    tooltip:"Click me and find out why"  }

Related sample:  Toolbar. Tooltips

Two state buttons

You can create buttons with two states: active (pressed) and inactive (unpressed). The activity of a two state button is controlled via the active attribute of the Button object:

    twoState:true, active:true  }

Related sample:  Toolbar. Two State

Changing state of a two state button on the fly

The state of a two state button can be changed programmatically with the setState() method of Toolbar as in:

    type:"button", twoState:true, value:"Check", id:"check"
toolbar.setState({"check":true});    // active:true  // or
toolbar.setState({"check":false});   // active:false

setState() accepts one parameter: a key-value pair with the ID of the button and the new value.

Accessing current state of a two state button

The current state of a two state button can be checked with the getState() method:

    type:"button", value:"Check", twoState:true, id:"check"
var state = toolbar.getState(); // -> { check:true } or { check:false }
Back to top