This is a button with an image. Unlike Button, it does not have a text label, but can also have a badge with a number and can be two state.

Related sample:  Toolbar. Image Button

Adding ImageButton

ImageButton can be easily added to a toolbar with the help of the add() method of Tree Collection:{
    type: "imageButton",
    count: 10,
    src: "../img/avatar.png"


You can provide the following attributes in the configuration object of an imageButton:

  • type - (string) the type of a control, set it to "imageButton". If not specified - the "navItem" type is applied by default.
  • src - (string) the path to the image
  • html - (string) optional, a string with HTML that should be inserted into the button
  • value - (string) a value of the button. You need to set either the html or value property to the button
  • id - (string) the id of a control, auto-generated if not set
  • twoState - (boolean) adds two states to the button: active (pressed) and inactive (unpressed)
  • active - (boolean) sets the state of a twoState button
  • 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
  • hotkey - (string) the name of the hot key for the button
  • count - (number) a badge with a number
  • countColor - (string) the color of a badge with number: "danger" | "secondary" | "primary" | "success"
  • size - (string) defines the size of a button: "small"|"medium"|"auto"
  • tooltip - (string) a tooltip for the button

Adding HTML content

You can add any custom HTML content to an imageButton with the help of the html property:

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

Related sample:  Toolbar. Item HTML Content

Working with ImageButton

Just like Button, imageButton can be hidden, disabled and can have a tooltip. You can also manipulate the states of a two state imageButton.

Check the full list of available operations in the Toolbar API and Tree Collection API.

Back to top