Open primary navigation
Origami Frontend Components & Services

Demos: o-buttons

Primary button

Primary button.

Open demo in a new tab 
<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>

Secondary/default button

The secondary button is the default and usually most used button.

Open demo in a new tab 
<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 (inverse)

Primary button for use on an alternate, dark background.

Open demo in a new tab 
<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 (inverse)

Secondary/default button for use on an alternate, dark background.

Open demo in a new tab 
<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 button (mono)

Primary "monochrome" theme.

Open demo in a new tab 
<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 button (mono)

Secondary/default "monochrome" theme.

Open demo in a new tab 
<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 theme

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

Open demo in a new tab 
<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>

Pagination layout

For pagination layouts. This layout can be combined with a theme.

Open demo in a new tab 
<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>

Grouped layout

For button layouts where there is a choice of related options. This layout can be combined with themes.

Open demo in a new tab 
<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>

Icon buttons

oButtons includes styles for some common icon buttons and the ability to add more using Sass mixins.

Open demo in a new tab 
<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>
Support Status
active
Switch component view

GitHub Repository

Install o-buttons

If using the Build Service, add o-buttons@^6.0.14 to your link tag.

If running a Manual Build, run bower install --save "o-buttons@^6.0.14".

Help & Support

o-buttons is maintained directly by the Origami team. If you have any questions about o-buttons or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com