This version of this component hasn't been branded yet.

Please check the latest version, 5.15.1, as branding is a relatively new addition to our components.

o-buttons

Buttons module

active

Primary button

Primary button.

Primary button (inverse)

Primary button which is inversed for use on an alternate background.

Secondary/default button

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

Secondary/default button (inverse)

Secondary/default button which is inversed for use on an alternate background.

Monochrome buttons

Secondary/default 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.

Bower Dependencies
o-colors ^4.2.2
o-icons >=4.4.2 <6
o-normalise ^1.2.0
o-brand ^1.1.0
GitHub Repository

Quickstart

Build Service

Add the following to your <link> tag

o-buttons@^5.10.1

How do I do that?

For more information see the Origami build service.

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

For more information see the Origami build process.