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

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

o-buttons@^5.8.2

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.8.2"

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.2 (10 days, 19 hours old)
Status (Learn more):
Active (as of 5.8.2)
Bundle sizes:
1,312b JavaScript 122.01KB CSS
This version
5.8.2 (10 days, 19 hours old)
Support status (Learn more):
Active (as of 5.8.2)
Last indexed
1 Dec 2017 10:55:22 (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