Skip to main content
Demo

​
Minimal usage

Display a button which emit an event on click. theme changes the colors of the button.
Available themes are :
  • default
  • info
  • success
  • error
  • warning
  • transparent
You can see all this options in the demo page. You can obviously use css like any other block to make your very own style. icon add an icon left to your content. Value can be an url to an image file or a icon name.
Demo

​
Advanced usage

content can ba a string, a localized string, or a blocks list:
type influences on the behavior of the button. Followings types are available:
  • event will emit the event set on value. value can be just a string or an object with event and payload.
  • internal and external are just href links and will navigate to the link set on value``. valuecan be a single string or an object withhrefandpopup`.
  • script executes javascript set on value.
  • upload opens a system file picker and emit the event set on value with the file url in payload. value can be a single string or an object like value of event type plus an accept attribute which allow to restrict the files types the user can select.
  • menu displays a menu with a list of buttons. its value is an array of another buttons descriptions. A menu can contains another menu and so on.
disabled set the button as disabled. Useless while a callback takes times. Example:
loading replace or add an spinner icon to your button. Example:
You can mix it with disabled:
confirm will ask a confirmation before trigger the action.
confirm object takes the following attributes:
  • title is title of the box displayed to the user. It can be a string or a localized string:
  • label is the main text displayed to the user. It can be a string or a localized string:
  • yesLabel is the label of the confirm button:
  • noLabel is the label of the cancel button:
  • placement position the dropdown around the button. Default will adapt automaticall but you can force with:
    • ‘top’
    • ‘left’
    • ‘right’
    • ‘bottom’
    • ‘topLeft’
    • ‘topRight’
    • ‘bottomLeft’
    • ‘bottomRight’
    • ‘leftTop’
    • ‘leftBottom’
    • ‘rightTop’
    • ‘rightBottom’
  • mode changes the way the box is displayed. Default is dropdown which display a dropdown around the button. modal displays the box over the screen as a dialog box.
Demo