Cirrus Label Component


3.0.03 years ago4 years agoMinified + gzip package size for @lightspeed/cirrus-label in KB


This component/package was renamed to Badge to prevent troubles communicating the difference with an input label.


Our basic label component.


First, make sure you have been through the Getting Started steps of adding Cirrus in your application.

If using Yarn:

yarn add @lightspeed/cirrus-label

Or using npm:

npm i -S @lightspeed/cirrus-label


Import required styles in your .scss:

@import '@lightspeed/cirrus-label/Label.scss';

React Component


Prop Type Description
children React.ReactNode The content to display inside the button
success boolean Display as success label
danger boolean Display as danger label
info boolean Display as success label
important boolean Display as important label
warning boolean Display as warning label
small boolean Display as small label
backgroundColor string any valid CSS color, i.e: #000000, only use for custom labels
textContrast string light or dark (use for custom labels with backgroundColor)


import React from 'react';
import Label from '@lightspeed/cirrus-label';

const MyComponent = () =>
    <Label>My Label</Label>

export default MyComponent;

CSS Component


Besides the base class .cr-label you can use one of these classes:

Type Class
success .cr-label--success
danger .cr-label--danger
info .cr-label--info
important .cr-label--important
warning .cr-label--warning
small .cr-label--small


<span class="cr-label cr-label--info">My Label</span>

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.