MediaWiki/Foundation/Simple Buttons

Jump to navigation Jump to search

Foundation CSS Framework for MediaWiki: Buttons

Buttons are generally linked to a resource - another article on the same site, or an external webpage.

Foundation has several different button styles which can be customized by using additional classes.

Note: To use components from the Zurb Foundation CSS Framework in MediaWiki, first install a custom skin such as the Foreground Skin or the Pivot Skin, which are built upon the Foundation CSS Framework.


  • Button styles include a Simple Button, as shown on this page; a Split Button; or a Dropdown Button.
  • Each button can be styled using additional classes.
  • Five types of button have different colours; a default style or defined by four classes named Success, Secondary, Alert and Info.
  • Button shapes can be changed from the square corners of the default style; to a small radius; or rounded corners.
  • Button can be displayed in three sizes: tiny, small or large.
  • Button width increases to fit the text; or expanded to fit the width of a container.
  • Buttons can also be disabled.
  • Buttons can be arranged in a row, called a Button Group.

The code for the simple buttons is shown below:-

Code Sample for Simple Buttons

The code for the simple radius buttons is shown below:-

Sample Code for Simple Radius Buttons

The code for the simple round buttons is shown below:-

Sample Code for Simple Round Buttons

The code for the each size of simple (radius) buttons is shown below:-

Code Sample for Button Sizes

5: Expanded Buttons

Code for small buttons with radius and expanded is shown below:-

Note that the width is not defined, other than the class .expand. The width is controlled by the container. In the above example the grid was used to define column widths of 3, 4 and 5 (total = 12) and the three columns are the containers for each button.

Sample Code for Expanded Buttons

The code for disabled buttons is shown below:-

Sample Code for Disabled Buttons

Disabled buttons are not active so why would you use them?

  • A disabled button could be used as a Label, or
  • As a developer you may find it useful to disable a button to indicate that the link target does not exist yet.


The code samples shown here are screen-captured images. This is because it did not seem possible to display the text only without the button class displayed as the button itself.

For interest, I used the extension SyntaxHighlight; and the html tags for pre and code, in various combinations, and could not prevent the button from being displayed instead of the text.