---
title: How to Add Custom Button
description: Add custom buttons to Jodit toolbar with icons, tooltips and actions.
keywords: custom button, jodit toolbar, toolbar button
---

# How to add custom button to Jodit toolbar

In the simplest case, you can add a button right when you initialize the editor.:

```js
const editor = Jodit.make('#editor', {
	buttons: [
		...Jodit.defaultOptions.buttons,
		{
			name: 'insertDate',
			tooltip: 'Insert current Date',
			exec: editor => {
				editor.s.insertHTML(new Date().toDateString());
			}
		}
	]
});
```

`{example CustomButtonInsertCurrentDate}`

Also, the button can be described in the dictionary `Jodit.defaultOptions.controls`.

```js
Jodit.defaultOptions.controls.selectAll = {
	tooltip: 'Select all content',
	command: 'selectall'
};

const editor = Jodit.make('#editor', {
	buttons: [...Jodit.defaultOptions.buttons, 'selectAll']
});
```

[The Button interface](https://github.com/xdan/jodit/blob/master/src/types/toolbar.d.ts#L19) is quite extensive, and we will not describe it here.

In this tutorial, we will only describe a few examples for different types of buttons.

## Drop-down list

```js
Jodit.defaultOptions.controls.wrapInTag = {
	tooltip: 'Wrap selection in tag',
	list: ['h1', 'h2', 'h3'],

	childTemplate: (editor, key, value) =>
		`<span class="${key}">${editor.i18n(value)}</span>`,

	isChildActive: (editor, control) => {
		const current = editor.s.current();

		if (current) {
			const currentBox = Dom.closest(
				current,
				node => Dom.isTag(node, control.list), // check if parent node is one of list
				editor.editor
			);

			return Boolean(
				currentBox &&
				currentBox !== editor.editor &&
				control.args !== undefined &&
				currentBox.nodeName.toLowerCase() === control.args[0]
			);
		}

		return false;
	},

	exec(editor, _, { control }) {
		let value = control.args && control.args[0]; // h1, h2 ...

		editor.s.applyStyle(undefined, {
			element: value
		});

		editor.setEditorValue(); // Synchronizing the state of the WYSIWYG editor and the source textarea

		return false;
	}
};
```

The list of items can also be a dictionary

```js
Jodit.defaultOptions.controls.wrapInTag = {
	// ...
	list: {
		h1: 'Heading 1',
		h2: 'Heading 2',
		h3: 'Heading 3'
	}
	// ...
};
```

## Button with a drop-down popup

Often you need not a list, but a full-fledged popup, which will contain your interface or form.

```js
Jodit.defaultOptions.controls.addWord = {
	tooltip: 'Enter text and insert',
	icon: 'pencil',
	popup: (editor, current, self, close) => {
		const form = editor.create.fromHTML(
			`<form>
  	    <input type="text"/>
  	    <button type="submit">Insert</button>
  	  </form>`
		);

		editor.e.on(form, 'submit', e => {
			e.preventDefault();
			editor.s.insertHTML(form.querySelector('input').value);
			close();
		});

		return form;
	}
};
```

`{example SimpleFormInsert}`

The popup method must return an HTMLElement or string.