Buttons module


Masterbrand standard theme

Standard theme for masterbrand buttons. This is the default theme.

<button class="o-buttons o-buttons--small">Standard</button>
<button class="o-buttons">Standard</button>
<button class="o-buttons o-buttons--big">Standard</button>

Masterbrand standout theme

Standout buttons should be used for primary actions.

<button class="o-buttons o-buttons--standout o-buttons--small">Standout</button>
<button class="o-buttons o-buttons--standout">Standout</button>
<button class="o-buttons o-buttons--standout o-buttons--big">Standout</button>

Masterbrand inverse theme

Inverse buttons for use on dark backgrounds.

<button class="o-buttons o-buttons--small o-buttons--inverse">Inverse</button>
<button class="o-buttons o-buttons--inverse">Inverse</button>
<button class="o-buttons o-buttons--inverse o-buttons--big">Inverse</button>

B2C theme

B2C themed buttons should be used in Customer facing non-editorial products eg Help or About Us.

<button class="o-buttons o-buttons--small o-buttons--b2c">B2C theme</button>
<button class="o-buttons o-buttons o-buttons--b2c">B2C theme</button>
<button class="o-buttons o-buttons--big o-buttons--b2c">B2C theme</button>

Pagination layout

For pagination layouts. This layout can be combined with a theme for example o-buttons--standout.

Grouped layout

For button layouts were there is a choice of related options. This layout can be combined with themes for example o-buttons--b2c.

<div class="o-buttons__group">
    <button class="o-buttons" aria-selected="true">John</button><!--
 --><button class="o-buttons">Paul</button><!--
 --><button class="o-buttons">George</button><!--
 --><button class="o-buttons">Ringo</button>
GitHub Repository


Build Service

Add the following to your <link> tag


How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-buttons"@"^4.5.4"

For more information see the Origami build process.