Origami Frontend Components & Services

Demos: o-labels


Label size modifiers are used to change the prominence of labels.

Content States

States used to differentiate between types of content.

Lifecycle States

States used to represent stages in the product lifecycle.


Labels sitting in line with text that's styled with o-typography.

Inverse Indicators

Badge Indicators

Indicator Sizes

All indicator labels adapt to the set font size. This demo shows using custom CSS to set the font size of indicator labels.

Inverse Timestamp

Switch component view

GitHub: o-labels@6.5.4

Install o-labels

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

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

Help & Support

o-labels is maintained directly by the Origami team. If you have any questions about o-labels 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