Maslosoft Framework Logo Maslosoft Framework Documentation
Flexible Application Foundation

Toolbar Button

This buttons are strictly prepared to work with Toolbar. Usually button is not instantiated directly, but rather by configuring toobar. It uses by default ActionButton class, but others can be used too.

There are numerous possible options to configure for each button:

Property Documentation

Action to execute on user interaction.

This should be string or object holding reference to JavaScript function.

This might be related to other settings, like binding or baseBinding and in such cases might only require function name instead of full reference.


Whether button is in active state. Pass JavaScript reference as value to make it react on state changes.


Extra html to add after toolbar, for modals etc.

It is not recommended to use this. Better use following snippet to add extra html:


Base binding. This will be prepended to action. Set to false to ignore, in such case action will require full reference to JavaScript function.

This should be either string pointing to JavaScript reference or object holding JavaScript reference, for instance ReferencableInterface.


Confirm message. Setting this will make button confirmable.


Default button classes, override to render unusual button style.


Disable button state. This can be either:

  • boolean value for static disabling
  • JsRef or other ReferencableInterface
  • string (not recommended) for dynamic binding

Keyboard shortcut for keyboard users. This might improve user experience dramatically in some cases, while in others will disturb. Use on your own judgment and after checking shortcut in different browsers.

This should be string representing shortcut, preferably with some modifiers, ie:

  • ctrl+s
  • ctrl+shift+g

Scope for using shortcut only in specified context.


Label for scope.


Hover action. This must have value of JavaScript reference to function, which will be called when hovering over button.

This property is useful when adding overlays on hover to indicate expected changes.


Icon name. This should be set to CSS class providing either font icon or sprite icon appearance.


Message to be displayed before action


Message type for introMessage


Optional label to be shown near or instead of icon.

One of icon or label should be used or button will appear empty.


Extra params to pass to button action


Tag used to create button


Link target if used together with url option. This attribute can be used to open link in new window, by setting its value to _blank


Tooltip for displaying on hover.


Whether button is a toggle type. This can be further controller by other toggle related properties.


Class to be used when button is toggled


Set toggle state either by passing boolean value or JavaScript reference to observable to control it's value.


Whether to restore button state on page reload.


Button type. One of MessageType constants:

  • MessageType::Standard
  • MessageType::Success
  • MessageType::Notice
  • MessageType::Warning
  • MessageType::Error

This will alter button appearance.


Set URL alternatively to action, to use as a link button.

This should be string, or any object that will return URL when casting to string, for instance ActionUrl


Whether buttons is visible. Use boolean value to statically set visibility.

To make it react on state changes, use string or object pointing to JavaScript observable value. Any object which will return JavaScript reference when casted to string will do the job. However it is recommended to use ReferencableInterface or JsRef.