Mediawiki.UI

2.0 Buttons

All buttons start with mw-ui-button class, modified by other classes. It can be any element. Due to a lack of a CSS reset, the exact styling of the button depends on what type of element is used. There are two kinds of buttons, the default is a "Call to Action" with an obvious border and there is a quiet kind without a border.

2.1 Neutral button styling

These are the main actions on the page/workflow. The page should have only one of progressive and destructive buttons, the rest being quiet.

<div>
  <button class="mw-ui-button">.mw-ui-button</button>
</div>
<div>
  <button class="mw-ui-button" disabled>.mw-ui-button</button>
</div>

2.1.1 Progressive buttons

Use progressive buttons for actions which lead to a next step in the process. .mw-ui-constructive is deprecated; consolidated with progressive, see T110555

<div>
  <button class="mw-ui-button mw-ui-progressive">.mw-ui-progressive</button>
</div>
<div>
  <button class="mw-ui-button mw-ui-progressive" disabled>.mw-ui-progressive</button>
</div>

2.1.2 Destructive buttons

Use destructive buttons for actions that remove or limit, such as deleting a page or blocking a user. This should not be used for cancel buttons.

<div>
  <button class="mw-ui-button mw-ui-destructive">.mw-ui-destructive</button>
</div>
<div>
  <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
</div>

2.1.3 Quiet buttons

Use quiet buttons when they are less important and alongside other progressive or destructive buttons. It should be used for an action that exits the user from the current view/workflow. Its use is not recommended on mobile/tablet due to lack of hover state.

<div>
  <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
</div>
<div>
  <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button>
</div>
<div>
  <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button>
</div>
<div>
  <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button>
</div>
<div>
  <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
</div>

2.1.5 Block buttons

Some buttons might need to be stacked.

<div>
  <button class="mw-ui-button mw-ui-block">.mw-ui-button</button>
</div>
<div>
  <button class="mw-ui-button mw-ui-progressive mw-ui-block">.mw-ui-progressive</button>
</div>
<div>
  <button class="mw-ui-button mw-ui-destructive mw-ui-block">.mw-ui-destructive</button>
</div>

2.1.6 Big buttons

Not all buttons are equal. You can emphasise certain actions over others using the mw-ui-big class.

<div>
  <button class="mw-ui-button mw-ui-big">.mw-ui-button</button>
</div>
<div>
  <button class="mw-ui-button mw-ui-progressive mw-ui-big">.mw-ui-progressive</button>
</div>
<div>
  <button class="mw-ui-button mw-ui-destructive mw-ui-big">.mw-ui-destructive</button>
</div>

2.2 Button groups

Group of buttons. Make sure you clear the floating after using a mw-ui-button-group.

<div class="mw-ui-button-group">
  <div class="mw-ui-button is-on">A</div>
  <div class="mw-ui-button">B</div>
  <div class="mw-ui-button">C</div>
  <div class="mw-ui-button">D</div>
</div><div style="clear:both"></div>
A
B
C
D