Skip to main content

Toolbar Button properties

Usage​

const data = [
    {
        type: "button";
        id?: string | number;
        parent?: string | number;
        value?: string;
        html?: string;
        css?: string | string[];
        icon?: string;
        items?: IMenuElement[]; // ISpacer | ISeparator | INavItem | IMenuItem | ICustomHTML
        group?: string;
        hotkey?: string;
        tooltip?: string;
        count?: number;
        countColor?: "danger" | "secondary" | "primary" | "success";
        multiClick?: boolean;
        view?: "flat" | "link";
        size?: "small" | "medium";
        color?: "danger" | "secondary" | "primary" | "success";
        full?: boolean;
        circle?: boolean;
        loading?: boolean;
        hidden?: boolean;
        disabled?: boolean;
    },
    // more Toolbar controls
]

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 block
value(optional) a value of the button. You need to set either the value or html property to the button
html(optional) a string with HTML that should be inserted into the button
css(optional) adds style classes to a button
icon(optional) an icon of 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.
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
tooltip(optional) a tooltip for the button
count(optional) a badge with a number
countColor(optional) the color of a badge with number: "danger" | "secondary" | "primary" | "success"
multiClick(optional) if true - the "click" event will fire multiple times when the button is clicked and held; if false - the "click" event will fire on each click of the button
view(optional) defines the look of a button: "flat"|"link"
size(optional) defines the size of a button: "small"|"medium"
color(optional) defines the color scheme of a button: "danger"|"secondary"|"primary"|"success"
full(optional) extends a button to the full width of a form
circle(optional) makes the corners of a button round
loading(optional) adds a spinner into a button
hidden(optional) defines whether a button is hidden
disabled(optional) defines whether a button is disabled

Example​

Related article: Button