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 o-buttons--secondary">Secondary</button>
<button class="o-buttons o-buttons--secondary o-buttons--big">Secondary</button>
<button
class="o-buttons o-buttons--secondary o-buttons--big o-buttons-icon o-buttons-icon--arrow-right"
>
Secondary
</button>
<button class="o-buttons o-buttons--secondary o-buttons--big" disabled>
Secondary
</button>
Primary button for use on an alternate, dark 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 for use on an alternate, dark background.
<button class="o-buttons o-buttons--secondary o-buttons--inverse">
Inverse
</button>
<button
class="o-buttons o-buttons--secondary o-buttons--inverse o-buttons--big"
>
Inverse
</button>
<button
class="o-buttons o-buttons--secondary o-buttons--inverse o-buttons-icon o-buttons-icon--arrow-right o-buttons--big"
>
Inverse
</button>
<button
class="o-buttons o-buttons--secondary 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--secondary o-buttons--mono">Mono</button>
<button class="o-buttons o-buttons--secondary o-buttons--mono o-buttons--big">
Mono
</button>
<button
class="o-buttons o-buttons--secondary o-buttons--mono o-buttons-icon o-buttons-icon--arrow-right o-buttons--big"
>
Mono
</button>
<button
class="o-buttons o-buttons--secondary 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--primary o-buttons--b2c">B2C theme</button>
<button class="o-buttons o-buttons--primary o-buttons--b2c">B2C theme</button>
<button
class="o-buttons o-buttons--primary o-buttons--b2c o-buttons-icon o-buttons-icon--arrow-right"
>
B2C theme
</button>
<button class="o-buttons o-buttons--primary o-buttons--big o-buttons--b2c">
B2C theme
</button>
For pagination layouts. This layout can be combined with a theme.
<div class="o-buttons-pagination">
<button
class="o-buttons o-buttons--secondary 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 o-buttons--secondary" aria-selected="true">1</button>
<button class="o-buttons o-buttons--secondary">2</button>
<button class="o-buttons o-buttons--secondary">3</button>
<div class="faux-inline-block">...</div>
<button class="o-buttons o-buttons--secondary">25</button>
<button class="o-buttons o-buttons--secondary">26</button>
<button class="o-buttons o-buttons--secondary">27</button>
<button
class="o-buttons o-buttons--secondary 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--secondary 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--secondary o-buttons--big"
aria-selected="true"
>
1
</button>
<button class="o-buttons o-buttons--secondary o-buttons--big">2</button>
<button class="o-buttons o-buttons--secondary o-buttons--big">3</button>
<div class="faux-inline-block">...</div>
<button class="o-buttons o-buttons--secondary o-buttons--big">25</button>
<button class="o-buttons o-buttons--secondary o-buttons--big">26</button>
<button class="o-buttons o-buttons--secondary o-buttons--big">27</button>
<button
class="o-buttons o-buttons--secondary 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.
<div class="o-buttons-group">
<button class="o-buttons o-buttons--secondary" aria-selected="true">
John
</button>
<button class="o-buttons o-buttons--secondary">Paul</button>
<button class="o-buttons o-buttons--secondary">George</button>
<button class="o-buttons o-buttons--secondary">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>
<button
class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-left"
>
Go back
</button>
<button
class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-right"
>
Go forward
</button>
<button
class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--upload"
>
Upload
</button>
<button
class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--download"
>
Download
</button>
<button
class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--warning"
>
Danger
</button>
<button
class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-down"
>
Show
</button>
<button
class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-up"
>
Hide
</button>
<button
class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--tick"
>
Tick
</button>
<button
class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--plus"
>
Plus
</button>
<button
class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--grid"
>
Grid
</button>
<button
class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--list"
>
List
</button>
<button
class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--edit"
>
Edit
</button>
<button
class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--search"
>
Search
</button>
<br />
<br />
<button
class="o-buttons o-buttons--secondary o-buttons--big o-buttons-icon o-buttons-icon--arrow-left"
>
Go back
</button>
<button
class="o-buttons o-buttons--secondary o-buttons--big o-buttons-icon o-buttons-icon--arrow-right"
>
Go forward
</button>
<button
class="o-buttons o-buttons--secondary o-buttons--big o-buttons-icon o-buttons-icon--upload"
>
Upload
</button>
<button
class="o-buttons o-buttons--secondary o-buttons--big o-buttons-icon o-buttons-icon--download"
>
Download
</button>
<button
class="o-buttons o-buttons--secondary o-buttons--big o-buttons-icon o-buttons-icon--warning"
>
Danger
</button>
<button
class="o-buttons o-buttons--secondary o-buttons--big o-buttons-icon o-buttons-icon--arrow-down"
>
Show
</button>
<button
class="o-buttons o-buttons--secondary o-buttons--big o-buttons-icon o-buttons-icon--arrow-up"
>
Hide
</button>
<button
class="o-buttons o-buttons--secondary o-buttons--big o-buttons-icon o-buttons-icon--tick"
>
Tick
</button>
<button
class="o-buttons o-buttons--secondary o-buttons--big o-buttons-icon o-buttons-icon--plus"
>
Plus
</button>
<button
class="o-buttons o-buttons--secondary o-buttons--big o-buttons-icon o-buttons-icon--grid"
>
Grid
</button>
<button
class="o-buttons o-buttons--secondary o-buttons--big o-buttons-icon o-buttons-icon--list"
>
List
</button>
<button
class="o-buttons o-buttons--secondary o-buttons--big o-buttons-icon o-buttons-icon--edit"
>
Edit
</button>
<button
class="o-buttons o-buttons--secondary o-buttons--big o-buttons-icon o-buttons-icon--search"
>
Search
</button>
<h2>Icon buttons without text</h2>
<button
class="o-buttons o-buttons--secondary 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--secondary 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--secondary 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--secondary 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--secondary 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--secondary 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--secondary 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--secondary 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--secondary 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--secondary 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--secondary 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--secondary 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--secondary 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--secondary 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--secondary 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--secondary 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--secondary 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--secondary 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--secondary 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--secondary 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--secondary 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--secondary 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--secondary 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--secondary 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--secondary 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--secondary 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 demo-">
<button
class="o-buttons o-buttons--primary o-buttons-- o-buttons-icon o-buttons-icon--arrow-down"
>
Show
</button>
<button
class="o-buttons o-buttons--secondary o-buttons-- o-buttons-icon o-buttons-icon--arrow-down"
>
Show
</button>
</div>
<div class="theme-box demo-mono">
<button
class="o-buttons o-buttons--primary o-buttons--mono o-buttons-icon o-buttons-icon--arrow-down"
>
Show
</button>
<button
class="o-buttons o-buttons--secondary o-buttons--mono o-buttons-icon o-buttons-icon--arrow-down"
>
Show
</button>
</div>
<div class="theme-box demo-inverse">
<button
class="o-buttons o-buttons--primary o-buttons--inverse o-buttons-icon o-buttons-icon--arrow-down"
>
Show
</button>
<button
class="o-buttons o-buttons--secondary o-buttons--inverse o-buttons-icon o-buttons-icon--arrow-down"
>
Show
</button>
</div>
<br />
<br />
<div class="theme-box demo-">
<button
class="o-buttons o-buttons--primary o-buttons--big o-buttons-- o-buttons-icon o-buttons-icon--arrow-down"
>
Show
</button>
<button
class="o-buttons o-buttons--secondary o-buttons--big o-buttons-- o-buttons-icon o-buttons-icon--arrow-down"
>
Show
</button>
</div>
<div class="theme-box demo-mono">
<button
class="o-buttons o-buttons--primary o-buttons--big o-buttons--mono o-buttons-icon o-buttons-icon--arrow-down"
>
Show
</button>
<button
class="o-buttons o-buttons--secondary o-buttons--big o-buttons--mono o-buttons-icon o-buttons-icon--arrow-down"
>
Show
</button>
</div>
<div class="theme-box demo-inverse">
<button
class="o-buttons o-buttons--primary o-buttons--big o-buttons--inverse o-buttons-icon o-buttons-icon--arrow-down"
>
Show
</button>
<button
class="o-buttons o-buttons--secondary o-buttons--big o-buttons--inverse o-buttons-icon o-buttons-icon--arrow-down"
>
Show
</button>
</div>