diff --git a/src/headingbuttonsui.js b/src/headingbuttonsui.js
index d28fe31..f3ba7a3 100644
--- a/src/headingbuttonsui.js
+++ b/src/headingbuttonsui.js
@@ -88,6 +88,7 @@ export default class HeadingButtonsUI extends Plugin {
 			view.label = option.title;
 			view.icon = option.icon || defaultIcons[ option.model ];
 			view.tooltip = true;
+			view.isToggleable = true;
 			view.bind( 'isEnabled' ).to( command );
 			view.bind( 'isOn' ).to( command, 'value', value => value == option.model );
 
diff --git a/tests/headingbuttonsui.js b/tests/headingbuttonsui.js
index 11ce101..c6628ba 100644
--- a/tests/headingbuttonsui.js
+++ b/tests/headingbuttonsui.js
@@ -99,6 +99,17 @@ describe( 'HeadingButtonUI', () => {
 			sinon.assert.calledOnce( executeCommandSpy );
 			sinon.assert.calledWithExactly( executeCommandSpy, 'heading', { value: 'heading1' } );
 		} );
+
+		it( 'should be initialized as toggleable button', () => {
+			const factory = editor.ui.componentFactory;
+
+			expect( factory.create( 'heading1' ).isToggleable ).to.be.true;
+			expect( factory.create( 'heading2' ).isToggleable ).to.be.true;
+			expect( factory.create( 'heading3' ).isToggleable ).to.be.true;
+			expect( factory.create( 'heading4' ).isToggleable ).to.be.true;
+			expect( factory.create( 'heading5' ).isToggleable ).to.be.true;
+			expect( factory.create( 'heading6' ).isToggleable ).to.be.true;
+		} );
 	} );
 
 	describe( 'custom config', () => {