• default: teal outline
  • standout: solid teal
  • uncolored: monochrome
  • inverse: for use on dark backgrounds
  • b2c: A theme for b2c products eg http://help.ft.com

and the following sizes:


  • small: 22px high
  • default: 26px high
  • big: 36px high

and have the following states:


  • standard: without any interaction
  • hover: when the mouse pointer is over
  • focus: it's the current target of keyboard input
  • active: the pointer is pushing / tapping / clicking the button
  • selected: marked as chosen
  • disabled: when clicking it will have no effect
  • pressed: for toggleable buttons that are currently activated


  • grouped: clustering buttons when choosing between options
  • pagination: for navigating through pages
  • icon: in some cases buttons have an icon instead of text

Button width is determined by its content.

View on GitHub

Quick start

Using the build service

Add the following token to your link tag (how do I do that?):


For more information see the Origami build service.

Using a 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.

Masterbrand standard theme


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

Masterbrand standout theme


Standout buttons should be used for primary actions.

Masterbrand inverse theme


Inverse buttons for use on dark backgrounds.

B2C theme


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

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.

Component information

Latest stable version:
4.5.4 (2 months, 8 days old)
Status (Learn more):
Active (as of 4.5.4)
Bundle sizes:
1,109b JavaScript 23.01KB CSS
This version
4.5.4 (2 months, 8 days old)
Support status (Learn more):
Active (as of 4.5.4)
Last indexed
11 Apr 2017 10:56:00 (Build now)
o-colors ^3.5.2 OK 3.6.0
o-hoverable >=0.1.1 <4 OK 3.1.0
o-icons >=4.4.2 <6 OK 5.3.0
o-normalise ^1.2.0 OK 1.2.1


To talk to the team you can contact the Origami team on Slack channel #ft-origami or directly by email at origami-support@ft.com

Report an issue