• default/secondary: teal outline
  • primary: solid teal
  • mono: monochrome
  • inverse: for use on dark backgrounds
  • b2c: A theme for b2c products eg http://help.ft.com
  • custom theme primary/custom theme secondary: Any color defined in o-colors can be used to set up custom color buttons

and the following sizes:


  • default: 28px high
  • big: 40px 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 can have an icon instead of or in addition to 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"@"^5.7.0"

For more information see the Origami build process.

Masterbrand primary buttons


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

Masterbrand secondary buttons


Secondary buttons should be used for primary actions.

Masterbrand inverse theme


Inverse buttons for use on dark backgrounds.

Monochrome buttons


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

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 where there is a choice of related options. This layout can be combined with themes for example o-buttons--b2c.

Icon buttons


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

Component information

Latest stable version:
5.8.5 (29 days, 13 hours old)
Status (Learn more):
Active (as of 5.7.0)
Bundle sizes:
1,313b JavaScript 122.14KB CSS
This version
5.7.0 (3 months, 29 days old)
Support status (Learn more):
Active (as of 5.7.0)
Last indexed
11 Feb 2018 18:23:22 (Build now)
o-colors ^4.0.1 OK 4.1.5
o-icons >=4.4.2 <6 OK 5.6.0
o-normalise ^1.2.0 OK 1.6.0


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