Example code:
var button1 = new OO.ui.ButtonInputWidget( { label: 'Button 1' } ); var button2 = new OO.ui.ButtonInputWidget( { label: 'Button 2', useInputTag: true } ); var button3 = new OO.ui.ButtonWidget( { label: 'Button 3' } ); $( 'body' ).append( button1.$element, button2.$element, button3.$element );
Note that the height of button 2 is a little bit smaller than the other two buttons. It should have the same height instead, to make the different buttons visibly interchangeable.
I noticed this while adapting a user script for the new OOjs UI layout of the edit page. As the documentation says, I'd prefer to use an OO.ui.ButtonWidget, but since the other buttons use input tags, I had to use an input tag for my button, too, to have it match the height of the other buttons.