o-buttons

CSS

Themes

  • 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

and the following sizes:

Sizes

  • default: 28px high
  • big: 40px high

and have the following states:

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

Use-cases

  • 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?):

o-buttons@^5.1.0

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.1.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 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:
5.8.2 (11 days, 20 hours old)
Status (Learn more):
Active (as of 5.1.0)
Bundle sizes:
1,101b JavaScript 29.91KB CSS
This version
5.1.0 (4 months, 16 days old)
Support status (Learn more):
Active (as of 5.1.0)
Last indexed
18 Oct 2017 11:29:02 (Build now)
Installable?
OK
Dependencies
o-colors ^4.0.1 OK 4.1.5
o-icons >=4.4.2 <6 OK 5.4.3
o-normalise ^1.2.0 OK 1.5.2
Dependents
alphaville-barrieralphaville-uikmt-headern-barriersn-desktop-app-bannern-invite-colleaguesn-messagesn-nps-feedbackn-syndicationn-uin-ui-foundationso-author-alertso-bannero-email-only-signupo-headero-subs-cardo-tabso-three-sixtyorigami-reactwebchat

Contact

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

Origami