This style guide is deprecated. Please see the revised style guide instead.

Buttons

Buttons are one of the most common interface elements —they guide users through multi-step processes. Buttons have a fixed height, an automatic minimum width, and a maximum width that is determined by their content.

Acceptable Modifiers : Style, Intention, Importance

Button Styles

Primary buttons

$widget = new OOUI\FieldsetLayout( array(
	'items' => array(
		new OOUI\FieldLayout( array(
			'items' => array(
				new OOUI\ButtonWidget( array(
					'flags' => 'primary neutral',
					'label' => 'Neutral button'
				) )
			)

		) )
	)

) );
$wgOut->addHTML( $widget->toString() );
var widget = new OO.ui.FieldsetLayout( {
	"items": [
		new OO.ui.FieldLayout( {
			"items": [
				new OO.ui.ButtonWidget( {
					"flags": "primary neutral",
					"label": "Neutral button"
				} )
			]

		} )
	]

} );
widget.$element.appendTo( $( 'body' ) );
{{#ooui "fieldsetlayout"}}
	{{#ooui "fieldlayout"}}
		{{#ooui "button" flags="primary neutral"}}
			Neutral button
		{{/ooui}}
	{{/ooui}}
{{/ooui}}

$widget = new OOUI\FieldsetLayout( array(
	'items' => array(
		new OOUI\FieldLayout( array(
			'items' => array(
				new OOUI\ButtonWidget( array(
					'flags' => 'primary progressive',
					'label' => 'Progressive button'
				) )
			)

		) )
	)

) );
$wgOut->addHTML( $widget->toString() );
var widget = new OO.ui.FieldsetLayout( {
	"items": [
		new OO.ui.FieldLayout( {
			"items": [
				new OO.ui.ButtonWidget( {
					"flags": "primary progressive",
					"label": "Progressive button"
				} )
			]

		} )
	]

} );
widget.$element.appendTo( $( 'body' ) );
{{#ooui "fieldsetlayout"}}
	{{#ooui "fieldlayout"}}
		{{#ooui "button" flags="primary progressive"}}
			Progressive button
		{{/ooui}}
	{{/ooui}}
{{/ooui}}

$widget = new OOUI\FieldsetLayout( array(
	'items' => array(
		new OOUI\FieldLayout( array(
			'items' => array(
				new OOUI\ButtonWidget( array(
					'flags' => 'primary constructive',
					'label' => 'Constructive button'
				) )
			)

		) )
	)

) );
$wgOut->addHTML( $widget->toString() );
var widget = new OO.ui.FieldsetLayout( {
	"items": [
		new OO.ui.FieldLayout( {
			"items": [
				new OO.ui.ButtonWidget( {
					"flags": "primary constructive",
					"label": "Constructive button"
				} )
			]

		} )
	]

} );
widget.$element.appendTo( $( 'body' ) );
{{#ooui "fieldsetlayout"}}
	{{#ooui "fieldlayout"}}
		{{#ooui "button" flags="primary constructive"}}
			Constructive button
		{{/ooui}}
	{{/ooui}}
{{/ooui}}

$widget = new OOUI\FieldsetLayout( array(
	'items' => array(
		new OOUI\FieldLayout( array(
			'items' => array(
				new OOUI\ButtonWidget( array(
					'flags' => 'primary destructive',
					'label' => 'Destructive button'
				) )
			)

		) )
	)

) );
$wgOut->addHTML( $widget->toString() );
var widget = new OO.ui.FieldsetLayout( {
	"items": [
		new OO.ui.FieldLayout( {
			"items": [
				new OO.ui.ButtonWidget( {
					"flags": "primary destructive",
					"label": "Destructive button"
				} )
			]

		} )
	]

} );
widget.$element.appendTo( $( 'body' ) );
{{#ooui "fieldsetlayout"}}
	{{#ooui "fieldlayout"}}
		{{#ooui "button" flags="primary destructive"}}
			Destructive button
		{{/ooui}}
	{{/ooui}}
{{/ooui}}

These are the main actions on the page or workflow. The page should have only one of progressive, constructive and destructive buttons, the rest being quiet. Use progressive buttons for actions which lead to a next step in the process. .mw-ui-primary is deprecated, kept for compatibility. Use constructive buttons for actions which result in a final action in the process that results in a change of state (e.g. save changes button).


Quiet buttons

$widget = new OOUI\ButtonWidget( array(
	'flags' => '',
	'framed' => '',
	'label' => 'Neutral button'
) );
$wgOut->addHTML( $widget->toString() );
var widget = new OO.ui.ButtonWidget( {
	"flags": "",
	"framed": "",
	"label": "Neutral button"
} );
widget.$element.appendTo( $( 'body' ) );
{{#ooui "button" flags="" framed=""}}
	Neutral button
{{/ooui}}

$widget = new OOUI\ButtonWidget( array(
	'flags' => 'progressive',
	'framed' => '',
	'label' => 'Progressive button'
) );
$wgOut->addHTML( $widget->toString() );
var widget = new OO.ui.ButtonWidget( {
	"flags": "progressive",
	"framed": "",
	"label": "Progressive button"
} );
widget.$element.appendTo( $( 'body' ) );
{{#ooui "button" flags="progressive" framed=""}}
	Progressive button
{{/ooui}}

$widget = new OOUI\ButtonWidget( array(
	'flags' => 'constructive',
	'framed' => '',
	'label' => 'Constructive button'
) );
$wgOut->addHTML( $widget->toString() );
var widget = new OO.ui.ButtonWidget( {
	"flags": "constructive",
	"framed": "",
	"label": "Constructive button"
} );
widget.$element.appendTo( $( 'body' ) );
{{#ooui "button" flags="constructive" framed=""}}
	Constructive button
{{/ooui}}

$widget = new OOUI\ButtonWidget( array(
	'flags' => 'destructive',
	'framed' => '',
	'label' => 'Destructive button'
) );
$wgOut->addHTML( $widget->toString() );
var widget = new OO.ui.ButtonWidget( {
	"flags": "destructive",
	"framed": "",
	"label": "Destructive button"
} );
widget.$element.appendTo( $( 'body' ) );
{{#ooui "button" flags="destructive" framed=""}}
	Destructive button
{{/ooui}}

Buttons in the quiet style do not display the Intention color or draw a button boundary unless the user interacts with them via hover or focus. Due to a lack of hover state on touch devices quiet buttons are always shown in their Hover state on these devices.


Normal

Normal buttons can come in many styles. They can have text labels, text and icon, or icon only. They can be Primary and be colored with Intention or not.

Toolbar

Buttons with the Toolbar style do not have rounded corners and fill the space within which they are placed, most commonly a toolbar, because of this their width might exceed their label.


Sets of buttons

$widget = new OOUI\ButtonGroupWidget( array(
	'items' => array(
		new OOUI\ButtonWidget( array(
			'label' => 'Cancel',
			'framed' => false,
			'flags' => 'destructive'
		) ),
		new OOUI\ButtonWidget( array(
			'label' => 'Preview'
		) ),
		new OOUI\ButtonWidget( array(
			'label' => 'Save changes',
			'flags' => array (
  0 => 'primary',
  1 => 'constructive',
)
		) )
	)

) );
$wgOut->addHTML( $widget->toString() );
var widget = new OO.ui.ButtonGroupWidget( {
	"items": [
		new OO.ui.ButtonWidget( {
			"label": "Cancel",
			"framed": false,
			"flags": "destructive"
		} ),
		new OO.ui.ButtonWidget( {
			"label": "Preview"
		} ),
		new OO.ui.ButtonWidget( {
			"label": "Save changes",
			"flags": ["primary","constructive"]
		} )
	]

} );
widget.$element.appendTo( $( 'body' ) );

When an interface requires more than one button, the ordering should read from right to left in languages read left to right, with the most common action being the rightmost. Only the rightmost action should use Primary importance level, consider using Normal buttons or Quiet buttons for secondary actions, as importance decreases. Under no circumstance should an interface display more that one Primary button colored with Intention.


Button groups

Button groups are buttons which share adjoining edges. Button groups can act as normal buttons or toggles, have text labels, text and icon, or icon only. Button groups can also include other control types such as dropdowns, and comboboxes.

Button groups must all share the same intention and style.

Acceptable Modifiers : Style, Intention


Loading and progress states in buttons