Origami Frontend Components & Services

The Origami Registry is being decommissioned by the end of March 2024 and replaced with Storybook. For more information please read our blog post.

Please share any feedback in our #origami-chat Slack channel.

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 which is inversed for use on an alternate background.

Secondary/default button (inverse)

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

Primary button (mono)

Primary "monochrome" theme.

Secondary/default button (mono)

Secondary/default "monochrome" theme.

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.

Status
active Origami v1 (Bower)
Switch component view

GitHub: o-buttons

Install o-buttons

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

If using the Bower package manager for a Manual Build, run bower install --save "o-buttons@^5.13.2".

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: #ft-origami
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: #ft-origami
Email: origami.support@ft.com