This version of this component hasn't been branded yet.

Please check the latest version, 5.13.2, as branding is a relatively new addition to our components.

o-buttons

Buttons module

active

Masterbrand primary buttons

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

<button class="o-buttons o-buttons--primary">Primary</button>
<button class="o-buttons o-buttons--primary o-buttons--big">Primary</button>
<button class="o-buttons o-buttons--primary o-buttons--big" disabled>Primary</button>

Masterbrand secondary buttons

Secondary buttons should be used for primary actions.

<button class="o-buttons">Secondary</button>
<button class="o-buttons o-buttons--big">Secondary</button>
<button class="o-buttons o-buttons--big" disabled>Secondary</button>

Masterbrand inverse theme

Inverse buttons for use on dark backgrounds.

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

Monochrome buttons

A monochrome theme for people who need a different theme to those supported by o-buttons (Masterbrand and b2c)

<button class="o-buttons o-buttons--mono">Mono</button>
<button class="o-buttons o-buttons--mono o-buttons--big">Mono</button>
<button class="o-buttons o-buttons--mono o-buttons--big" disabled>Mono</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.

<div class="o-buttons__pagination">
	<button class="o-buttons o-buttons-icon o-buttons-icon--arrow-left o-buttons-icon--icon-only" disabled="disabled"><span class="o-buttons-icon__label">Fewer results</span></button>
	<button class="o-buttons" aria-selected="true">1</button>
	<button class="o-buttons">2</button>
	<button class="o-buttons">3</button>
	<div class="faux-inline-block">...</div>
	<button class="o-buttons">25</button>
	<button class="o-buttons">26</button>
	<button class="o-buttons">27</button>
	<button class="o-buttons o-buttons-icon o-buttons-icon--arrow-right o-buttons-icon--icon-only"><span class="o-buttons-icon__label">More results</span></button>
</div>

<br>
<br>

<div class="o-buttons__pagination">
	<button class="o-buttons o-buttons--big o-buttons-icon o-buttons-icon--big o-buttons-icon--arrow-left o-buttons-icon--icon-only" disabled="disabled"><span class="o-buttons-icon__label">Fewer results</span></button>
	<button class="o-buttons o-buttons--big" aria-selected="true">1</button>
	<button class="o-buttons o-buttons--big">2</button>
	<button class="o-buttons o-buttons--big">3</button>
	<div class="faux-inline-block">...</div>
	<button class="o-buttons o-buttons--big">25</button>
	<button class="o-buttons o-buttons--big">26</button>
	<button class="o-buttons o-buttons--big">27</button>
	<button class="o-buttons o-buttons--big o-buttons-icon o-buttons-icon--arrow-right o-buttons-icon--icon-only"><span class="o-buttons-icon__label">More results</span></button>
</div>

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>
</div>
Bower Dependencies
o-colors ^4.0.1
o-icons >=4.4.2 <6
o-normalise ^1.2.0
GitHub Repository

Quickstart

Build Service

Add the following to your <link> tag

o-buttons@^5.1.0

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"@"^5.1.0"

For more information see the Origami build process.