---
title: Custom Toolbar Button
description: Create custom toolbar buttons for Jodit editor.
keywords: custom button, toolbar, jodit button
---

# Custom button

There are two methods to create buttons.

- You can extend [options.controls](https://xdsoft.net/jodit/docs/classes/config.Config.html#controls) and then add a button using its string name.
- Alternatively, you can add buttons as an [IControlType](https://xdsoft.net/jodit/docs/interfaces/types.IControlType.html) object.

Include Jodit

```html
<link rel="stylesheet" href="build/jodit.min.css" />
<script src="build/jodit.min.js"></script>
```

Create input element

```html
<textarea id="editor">Some text</textarea>
```

Extend controls store

```javascript
Jodit.defaultOptions.controls.info = {
	iconURL: './build/images/icons/269-info.png',
	popup: function (editor) {
		var text = Jodit.modules.Helpers.trim(editor.editor.innerText);
		var wordCount = text.split(/[\s\n\r\t]+/).filter(function (value) {
			return value;
		}).length;
		var charCount = text.replace(/[\s\n\r\t]+/, '').length;

		return (
			'<div style="padding: 10px;">' +
			'Words: ' +
			wordCount +
			'<br>' +
			'Chars: ' +
			charCount +
			'<br>' +
			'</div>'
		);
	}
};
```

And use this button by name or create another button like [ControlType](/jodit/docs/interfaces/types.IControlType.html#root)

```javascript
const editor = Jodit.make('#editor', {
	buttons: [
		'image',
		{
			iconURL: './images/copy.png',
			exec: function (editor) {
				if (editor.selection.isCollapsed()) {
					editor.execCommand('selectall');
				}
				editor.execCommand('copy');
				Jodit.Alert('Text in your clipboard');
			}
		}
	],
	extraButtons: ['info']
});
```

## Result

```html
<!-- Example Start -->
<textarea id="editor">Some text</textarea>

<script>
	Jodit.defaultOptions.controls.info = {
		iconURL: './build/images/icons/269-info.png',
		popup: function (editor) {
			var text = Jodit.modules.Helpers.trim(editor.editor.innerText);
			var wordCount = text.split(/[\s\n\r\t]+/).filter(function (value) {
				return value;
			}).length;
			var charCount = text.replace(/[\s\n\r\t]+/, '').length;

			return editor.create.fromHTML(
				'<div style="padding: 10px;">' +
					'Words: ' +
					wordCount +
					'<br>' +
					'Chars: ' +
					charCount +
					'<br>' +
					'</div>'
			);
		}
	};

	const editor = Jodit.make('#editor', {
		buttons: [
			'image',
			{
				iconURL: './build/images/icons/045-copy.png',
				exec: function (editor) {
					if (editor.selection.isCollapsed()) {
						editor.execCommand('selectall');
					}
					editor.execCommand('copy');
					Jodit.Alert('Text in your clipboard');
				}
			}
		],
		extraButtons: ['info']
	});
</script>
<!-- Example End -->
```