Origami Frontend Components & Services

Readme: o-labels

Standard labels



Labels can have one of several states:

<span class="o-labels">Label</span>
<span class="o-labels o-labels--active">Active</span>
<span class="o-labels o-labels--error">Error</span>
<span class="o-labels o-labels--pending">Pending</span>
<span class="o-labels o-labels--live">Live</span>
<span class="o-labels o-labels--closed">Closed</span>
<span class="o-labels o-labels--premium">Premium</span>
<span class="o-labels o-labels--brand">Brand</span>
<span class="o-labels o-labels--commercial-content">Commercial Content</span>

Use o-typography to control the sizing of labels. Use a label one size smaller than surrounding text, e.g. use -2 label with -1 text.


As with all Origami components, o-labels has a silent mode. To use its compiled CSS (rather than incorporating its mixins into your own Sass) set $o-labels-is-silent : false; in your Sass before you import the o-labels Sass:

$o-labels-is-silent: false;
@import 'o-labels/main';

Using Sass mixins

The oLabels mixin can be used to create a label by passing in the desired state and size (based on the o-typography scale):

.my-label {
    @include oLabels('premium', -1);

The oLabelState mixin is used to output different coloured labels based on the available states (see markup section for full list).

.label--error {
    @include oLabelsState('error');

Controlling label size

To output different sized labels for your project, use the oTypographySize mixin to change the size of your label with different modifiers:

.label--big {
    @include oTypographySize(-1);

Migration guide

Migrating from v2 to v3

V3 of o-labels removes the oLabelSize mixin. To create different sized labels for your product you should use the o-typography mixins as shown in the controlling label size section.


If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #ft-origami or email Origami Support.


This software is published by the Financial Times under the MIT licence.

Switch component view

GitHub Repository

Install o-labels

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

If running a Manual Build, run bower install --save "o-labels@^3.0.2".

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