Primary button.
<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-icon o-buttons-icon--arrow-right o-buttons--big">Primary</button>
<button class="o-buttons o-buttons--primary o-buttons--big" disabled>Primary</button>The secondary button is the default and usually most used button.
<button class="o-buttons">Secondary</button>
<button class="o-buttons o-buttons--big">Secondary</button>
<button class="o-buttons o-buttons--big o-buttons-icon o-buttons-icon--arrow-right">Secondary</button>
<button class="o-buttons o-buttons--big" disabled>Secondary</button>Primary button which is inversed for use on an alternate background.
<button class="o-buttons o-buttons--primary o-buttons--inverse">Primary Inverse</button>
<button class="o-buttons o-buttons--primary o-buttons--inverse o-buttons--big">Primary Inverse</button>
<button class="o-buttons o-buttons--primary o-buttons-icon o-buttons-icon--arrow-right o-buttons--inverse o-buttons--big">Primary Inverse</button>
<button class="o-buttons o-buttons--primary o-buttons--inverse o-buttons--big" disabled>Primary Inverse</button>Secondary/default button which is inversed for use on an alternate background.
<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-icon o-buttons-icon--arrow-right o-buttons--big">Inverse</button>
<button class="o-buttons o-buttons--inverse o-buttons--big" disabled>Inverse</button>Primary "monochrome" theme.
<button class="o-buttons o-buttons--primary o-buttons--mono">Primary Mono</button>
<button class="o-buttons o-buttons--primary o-buttons--mono o-buttons--big">Primary Mono</button>
<button class="o-buttons o-buttons--primary o-buttons--mono o-buttons--big o-buttons-icon o-buttons-icon--arrow-right">Primary Mono</button>
<button class="o-buttons o-buttons--primary o-buttons--mono o-buttons--big" disabled>Primary Mono</button>Secondary/default "monochrome" theme.
<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-icon o-buttons-icon--arrow-right o-buttons--big">Mono</button>
<button class="o-buttons o-buttons--mono o-buttons--big" disabled>Mono</button>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 o-buttons--b2c o-buttons-icon o-buttons-icon--arrow-right">B2C theme</button>
<button class="o-buttons o-buttons--big o-buttons--b2c">B2C theme</button>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>For button layouts where 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>oButtons includes styles for some common icon buttons and the ability to add more using Sass mixins.
<h2>Currently supported icons</h2>
<p>You can add any icon using the <code>oButtonsIconButton</code> mixin. If you need an icon button with the build service, please ask the team or raise a PR adding the o-icons icon to the <code>$o-buttons-icons</code> variable.</p>
<button class="o-buttons o-buttons-icon o-buttons-icon--arrow-left">
Go back
</button>
<button class="o-buttons o-buttons-icon o-buttons-icon--arrow-right">
Go forward
</button>
<button class="o-buttons o-buttons-icon o-buttons-icon--upload">
Upload
</button>
<button class="o-buttons o-buttons-icon o-buttons-icon--download">
Download
</button>
<button class="o-buttons o-buttons-icon o-buttons-icon--warning">
Danger
</button>
<button class="o-buttons o-buttons-icon o-buttons-icon--arrow-down">
Show
</button>
<button class="o-buttons o-buttons-icon o-buttons-icon--arrow-up">
Hide
</button>
<button class="o-buttons o-buttons-icon o-buttons-icon--tick">
Tick
</button>
<button class="o-buttons o-buttons-icon o-buttons-icon--plus">
Plus
</button>
<button class="o-buttons o-buttons-icon o-buttons-icon--grid">
Grid
</button>
<button class="o-buttons o-buttons-icon o-buttons-icon--list">
List
</button>
<button class="o-buttons o-buttons-icon o-buttons-icon--edit">
Edit
</button>
<button class="o-buttons o-buttons-icon o-buttons-icon--search">
Search
</button>
<br>
<br>
<button class="o-buttons o-buttons--big o-buttons-icon o-buttons-icon--arrow-left">
Go back
</button>
<button class="o-buttons o-buttons--big o-buttons-icon o-buttons-icon--arrow-right">
Go forward
</button>
<button class="o-buttons o-buttons--big o-buttons-icon o-buttons-icon--upload">
Upload
</button>
<button class="o-buttons o-buttons--big o-buttons-icon o-buttons-icon--download">
Download
</button>
<button class="o-buttons o-buttons--big o-buttons-icon o-buttons-icon--warning">
Danger
</button>
<button class="o-buttons o-buttons--big o-buttons-icon o-buttons-icon--arrow-down">
Show
</button>
<button class="o-buttons o-buttons--big o-buttons-icon o-buttons-icon--arrow-up">
Hide
</button>
<button class="o-buttons o-buttons--big o-buttons-icon o-buttons-icon--tick">
Tick
</button>
<button class="o-buttons o-buttons--big o-buttons-icon o-buttons-icon--plus">
Plus
</button>
<button class="o-buttons o-buttons--big o-buttons-icon o-buttons-icon--grid">
Grid
</button>
<button class="o-buttons o-buttons--big o-buttons-icon o-buttons-icon--list">
List
</button>
<button class="o-buttons o-buttons--big o-buttons-icon o-buttons-icon--edit">
Edit
</button>
<button class="o-buttons o-buttons--big o-buttons-icon o-buttons-icon--search">
Search
</button>
<h2>Icon buttons without text</h2>
<button class="o-buttons o-buttons-icon o-buttons-icon--arrow-left o-buttons-icon--icon-only">
<span class="o-buttons-icon__label">Go back</span>
</button>
<button class="o-buttons o-buttons-icon o-buttons-icon--arrow-right o-buttons-icon--icon-only">
<span class="o-buttons-icon__label">Go forward</span>
</button>
<button class="o-buttons o-buttons-icon o-buttons-icon--upload o-buttons-icon--icon-only">
<span class="o-buttons-icon__label">Upload</span>
</button>
<button class="o-buttons o-buttons-icon o-buttons-icon--download o-buttons-icon--icon-only">
<span class="o-buttons-icon__label">Download</span>
</button>
<button class="o-buttons o-buttons-icon o-buttons-icon--warning o-buttons-icon--icon-only">
<span class="o-buttons-icon__label">Danger</span>
</button>
<button class="o-buttons o-buttons-icon o-buttons-icon--arrow-down o-buttons-icon--icon-only">
<span class="o-buttons-icon__label">Show</span>
</button>
<button class="o-buttons o-buttons-icon o-buttons-icon--arrow-up o-buttons-icon--icon-only">
<span class="o-buttons-icon__label">Hide</span>
</button>
<button class="o-buttons o-buttons-icon o-buttons-icon--tick o-buttons-icon--icon-only">
<span class="o-buttons-icon__label">Tick</span>
</button>
<button class="o-buttons o-buttons-icon o-buttons-icon--plus o-buttons-icon--icon-only">
<span class="o-buttons-icon__label">Plus</span>
</button>
<button class="o-buttons o-buttons-icon o-buttons-icon--grid o-buttons-icon--icon-only">
<span class="o-buttons-icon__label">Grid</span>
</button>
<button class="o-buttons o-buttons-icon o-buttons-icon--list o-buttons-icon--icon-only">
<span class="o-buttons-icon__label">List</span>
</button>
<button class="o-buttons o-buttons-icon o-buttons-icon--edit o-buttons-icon--icon-only">
<span class="o-buttons-icon__label">Edit</span>
</button>
<button class="o-buttons o-buttons-icon o-buttons-icon--search o-buttons-icon--icon-only">
<span class="o-buttons-icon__label">Search</span>
</button>
<br>
<br>
<button class="o-buttons o-buttons-icon o-buttons--big o-buttons-icon--arrow-left o-buttons-icon--icon-only">
<span class="o-buttons-icon__label">Go back</span>
</button>
<button class="o-buttons o-buttons-icon o-buttons--big o-buttons-icon--arrow-right o-buttons-icon--icon-only">
<span class="o-buttons-icon__label">Go forward</span>
</button>
<button class="o-buttons o-buttons-icon o-buttons--big o-buttons-icon--upload o-buttons-icon--icon-only">
<span class="o-buttons-icon__label">Upload</span>
</button>
<button class="o-buttons o-buttons-icon o-buttons--big o-buttons-icon--download o-buttons-icon--icon-only">
<span class="o-buttons-icon__label">Download</span>
</button>
<button class="o-buttons o-buttons-icon o-buttons--big o-buttons-icon--warning o-buttons-icon--icon-only">
<span class="o-buttons-icon__label">Danger</span>
</button>
<button class="o-buttons o-buttons-icon o-buttons--big o-buttons-icon--arrow-down o-buttons-icon--icon-only">
<span class="o-buttons-icon__label">Show</span>
</button>
<button class="o-buttons o-buttons-icon o-buttons--big o-buttons-icon--arrow-up o-buttons-icon--icon-only">
<span class="o-buttons-icon__label">Hide</span>
</button>
<button class="o-buttons o-buttons-icon o-buttons--big o-buttons-icon--tick o-buttons-icon--icon-only">
<span class="o-buttons-icon__label">Tick</span>
</button>
<button class="o-buttons o-buttons-icon o-buttons--big o-buttons-icon--plus o-buttons-icon--icon-only">
<span class="o-buttons-icon__label">Plus</span>
</button>
<button class="o-buttons o-buttons-icon o-buttons--big o-buttons-icon--grid o-buttons-icon--icon-only">
<span class="o-buttons-icon__label">Grid</span>
</button>
<button class="o-buttons o-buttons-icon o-buttons--big o-buttons-icon--list o-buttons-icon--icon-only">
<span class="o-buttons-icon__label">List</span>
</button>
<button class="o-buttons o-buttons-icon o-buttons--big o-buttons-icon--edit o-buttons-icon--icon-only">
<span class="o-buttons-icon__label">Edit</span>
</button>
<button class="o-buttons o-buttons-icon o-buttons--big o-buttons-icon--search o-buttons-icon--icon-only">
<span class="o-buttons-icon__label">Search</span>
</button>
<h2>Icon buttons with different themes</h2>
<div class="theme-box primary">
<button class="o-buttons o-buttons--primary o-buttons-icon o-buttons-icon--arrow-down">
Show
</button>
</div>
<div class="theme-box secondary">
<button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-down">
Show
</button>
</div>
<div class="theme-box mono">
<button class="o-buttons o-buttons--mono o-buttons-icon o-buttons-icon--arrow-down">
Show
</button>
</div>
<div class="theme-box inverse">
<button class="o-buttons o-buttons--inverse o-buttons-icon o-buttons-icon--arrow-down">
Show
</button>
</div>
<br>
<br>
<div class="theme-box primary">
<button class="o-buttons o-buttons--big o-buttons--primary o-buttons-icon o-buttons-icon--arrow-down">
Show
</button>
</div>
<div class="theme-box secondary">
<button class="o-buttons o-buttons--big o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-down">
Show
</button>
</div>
<div class="theme-box mono">
<button class="o-buttons o-buttons--big o-buttons--mono o-buttons-icon o-buttons-icon--arrow-down">
Show
</button>
</div>
<div class="theme-box inverse">
<button class="o-buttons o-buttons--big o-buttons--inverse o-buttons-icon o-buttons-icon--arrow-down">
Show
</button>
</div>