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


Related sample:  Ribbon. Group Buttons

Creating Buttons

This is the basic syntax of a button:

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


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
  • css - (string) adds style classes to a button
  • hotkey - (string) the name of the hot key for the button
  • 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
  • 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"
  • 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
  • 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
  • icon - (string) an icon of the button
  • view - (string) defines the look of a button: "flat"|"link"
  • size - (string) defines the size of a button: "small"|"medium"|"auto"
    Related sample:  Ribbon. Button Height
  • 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

Adding Buttons

Button can be easily added to a ribbon block with the help of the add() method of TreeCollection:

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

Adding HTML content

You can add a custom element to a button with the help of the html property:

    type: "button",
    html: "<div id='preloader'><div id='loader'></div></div >",
    size: "auto"

Related sample:  Item HTML Content - DHTMLX Ribbon

Showing/hiding Button

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


Enabling/disabling Button

Any button in the ribbon can be enabled/disabled:


Adding an icon

A button can have an 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. Set the count property:

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

Related sample:  Ribbon. Buttons

Styling buttons

You can style Button by adding custom CSS classes in the css property:

    type:"button", value:"Best button", css:"best_button"

Where "best_button" can be a CSS class like this:

    background-color:rgb(183, 199, 228);

TwoState Buttons

You can create buttons with two states: active (pressed) and inactive (unpressed).

    type:"button", value:"Select", twoState:true, active:true

Changing the state of Button

The state of a TwoState button or values of controls can be changed programmatically with the setState() method of ribbon:

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

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

Accessing the state of Button

The current state of a TwoState button and values of controls can be checked with the getValues() method:

    type:"button", value:"Check", twoState:true, id:"check"
// { check:true }
// or
// { check:false }
Back to top