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

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"
});

Attributes

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

type	(string) the type of a control, set it to "button". If not specified - the "navItem" type is applied by default.
id	(string) the id of a control, auto-generated if not set
parent	(string) the parent of the block
value	(string) a value of the button. You need to set either the value or html property to the button
html	(string) optional, a string with HTML that should be inserted into the button
css	(string) adds style classes to a button
icon	(string) an icon of the button
items	(array) an array of nested controls.You can find the full list of all available controls here. If the type of a nested control is not specified, the menuItem type will be applied by default.
group	(string) defines the name of a group of controls a button belongs to. If one of the buttons in the group becomes active, all others automatically become inactive
twoState	(boolean) the flag that defines whether a button can be used in two states: active (pressed) and inactive (unpressed)
active	(boolean) for twoState buttons, if true, the button is in the active state
hotkey	(string) the name of the hot key for the button
tooltip	(string) a tooltip for the button
count	(number) a badge with a number
countColor	(string) the color of a badge with number: "danger" \| "secondary" \| "primary" \| "success"
multiClick	(boolean) defines the behavior of the Undo/Redo buttons: true - all the actions are reverted/re-applied one by one when the Undo/Redo button is clicked and held false - one action is reverted/re-applied on each click of the Undo/Redo button
view	(string) defines the look of a button: "flat"\|"link"
size	(string) defines the size of a button: "small"\|"medium"
color	(string) defines the color scheme of a button: "danger"\|"secondary"\|"primary"\|"success"
full	(boolean) extends a button to the full width of a form
circle	(boolean) makes the corners of a button round
loading	(boolean) adds a spinner into a button
hidden	(boolean) defines whether a button is hidden
disabled	(boolean) defines whether a button is disabled

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 class='user-button'><img src='../avatars/Avatar.jpg'/></div>",
}

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

Enabling/disabling a button

Any button in the toolbar can be enabled/disabled:

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

Related sample: Toolbar. Enable/Disable

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

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:

{
    type:"button", 
    value:"Select", 
    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 }