Skip to main content

Toolbar Button properties

Usage

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

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",
tooltip?: string,
view?: "flat" | "link",

css?: string | string[],
disabled?: boolean,
hidden?: 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
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.
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) 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
size(optional) defines the size of a button: "small"|"medium"
tooltip(optional) a tooltip for the button
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