Skip to main content

defaultToolbarButtons

Description​

An array of objects with default configuration parameters for the Toolbar buttons

defaultToolbarButtons contains only the toolbar buttons that are always available. Buttons that appear conditionally (such as Split task or Undo/Redo) are not included in this array.

This property gets deprecated in version 3.0. To obtain the full toolbar configuration, including conditional items, use getToolbarButtons().

Default config​

export const defaultToolbarButtons = [
   {    
      id: "add-task",
      comp: "button",
      icon: "wxi-plus",
      text: "New task",
      type: "primary",
   },
   {
      id: "edit-task",
      comp: "icon",
      icon: "wxi-edit",
      menuText: "Edit",
      text: "Ctrl+E",
   },
   {
      id: "delete-task",
      comp: "icon",
      icon: "wxi-delete",
      menuText: "Delete",
      text: "Ctrl+D, Backspace",
   },
   { comp: "separator" },
   {
      id: "move-task:up",
      comp: "icon",
      icon: "wxi-angle-up",
      menuText: "Move up",
   },
   {
      id: "move-task:down",
      comp: "icon",
      icon: "wxi-angle-down",
      menuText: "Move down",
   },
   { comp: "separator" },
   {
      id: "copy-task",
      comp: "icon",
      icon: "wxi-content-copy",
      menuText: "Copy",
      text: "Ctrl+V",
   },
   {
      id: "cut-task",
      comp: "icon",
      icon: "wxi-content-cut",
      menuText: "Cut",
      text: "Ctrl+X",
   },
   {
      id: "paste-task",
      comp: "icon",
      icon: "wxi-content-paste",
      menuText: "Paste",
      text: "Ctrl+V",
   },
   { comp: "separator" },
   {
      id: "indent-task:add",
      comp: "icon",
      icon: "wxi-indent",
      menuText: "Indent",
   },
   {
      id: "indent-task:remove",
      comp: "icon",
      icon: "wxi-unindent",
      menuText: "Outdent",
   },
];

Parameters​

The array includes objects with the next parameters for each button:

  • id - (optional) the id of a button
  • comp - (required) specifies the type of the button item that can be one of the following: button, separator, spacer, label, icon
  • text - (optional) the text for a button
  • icon - (optional) sets the icon for a button, and the 'css' property applies a CSS class to the item
  • type - (optional) the following types of buttons are available: 'default', 'primary', 'secondary', 'danger', 'link'
  • menuText - (optional) the text for the option in the dropdown menu that appears when the screen size is small

Related articles: