Skip to main content

Ribbon Button properties

Usage​

const data = [
    {
        type: "button",
        id?: string | number,
        parent?: string,
        value?: string,
        items?: IMenuElement[], // ISpacer | ISeparator | INavItem | IMenuItem | ICustomHTML

        active?: boolean,
        circle?: boolean,
        color?: "danger" | "secondary" | "primary" | "success",
        count?: number,
        countColor?: "danger" | "secondary" | "primary" | "success",
        full?: boolean,
        group?: string,
        hotkey?: string,
        html?: string,
        icon?: string,
        loading?: boolean,
        multiClick?: boolean,
        size?: "small" | "medium" | "auto",
        tooltip?: string,
        twoState?: boolean,
        view?: "flat" | "link",

        css?: string,
        disabled?: boolean,
        hidden?: boolean,
    }
]

Description​

type(required) the type of a control, set it to "button". If not specified - the "navItem" type is applied by default.
id(optional) the id of a control, auto-generated if not set
parent(optional) the parent of the button
value(optional) a value of the button. You need to set either the value or html property to the button
items(optional) 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.
active(optional) for twoState buttons, if true, the button is in the active state
circle(optional) makes the corners of a button round
color(optional) defines the color scheme of a button: "danger"|"secondary"|"primary"|"success"
count(optional) a badge with a number
countColor(optional) the color of a badge with number: "danger" | "secondary" | "primary" | "success"
full(optional) extends a button to the full width of a form
group(optional) 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(optional) the name of the hot key for the button
html(optional) a string with HTML that should be inserted into the button
icon(optional) an icon of the button
loading(optional) adds a spinner into a button
multiClick(optional) 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
size(optional) defines the size of a button: "small"|"medium"|"auto"

Related Sample: Ribbon. Button height: auto, small, medium
tooltip(optional) a tooltip for the button
twoState(optional) the flag that defines whether a button can be used in two states: active (pressed) and inactive (unpressed)
view(optional) defines the look of a button: "flat"|"link"
css(optional) adds style classes to a button
disabled(optional) defines whether a button is disabled
hidden(optional) defines whether a button is hidden

Example​

Related article: Button