Origami Frontend Components & Services

Demos: o-buttons

Primary button

Primary button.

Secondary/default button

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

Primary button (inverse)

Primary button for use on an alternate, dark background.

Secondary/default button (inverse)

Secondary/default button for use on an alternate, dark background.

Primary button (mono)

Primary "monochrome" theme.

Secondary/default button (mono)

Secondary/default "monochrome" theme.

Professional theme

Professional themed buttons.

Professional Inverse theme

Inverse Professional themed buttons.

B2C theme

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

Pagination layout

This demo shows a pagination layout with anchor tags and the default theme. The number of pages to show and button theme may be chosen by the project.

Pagination layout size

Pagination layouts may also use big buttons.

Grouped layout

For button layouts where there is a choice of related options. This layout can be combined with themes.

Icon buttons

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

Switch component view

GitHub: o-buttons@7.8.1

Install o-buttons

If using the Build Service, add o-buttons@^7.8.1 to your link tag.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-buttons@^7.8.1".

Help & Support

o-buttons is maintained directly by the Origami team. If you have any questions about o-buttons or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com