Skip to main content

Button

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. Button

Adding Button​

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

toolbar.data.add({
    type:"button", value:"Best button"
});

Properties​

You can provide the following properties in the configuration object of a Button control.

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",
    count:10
}

Adding HTML content​

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

{
    type: "button",
    html: "<div className='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:

toolbar.show(id);
toolbar.hide(id);

Related sample: Toolbar. Hide / show items

Enabling/disabling a button​

Any button in the toolbar can be enabled/disabled:

toolbar.enable(id);
toolbar.disable(id);

Related sample: Toolbar. Enable / disable items

Setting tooltip​

You can add a tooltip to a button:

{
    type:"button", 
    value:"Click", 
    tooltip:"Click me and find out why"
}

Related sample: Toolbar. Tooltips