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

Label

Our basic label component.

Installation

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

Usage

Import required styles in your .scss:

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

React Component

Props

| 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) |

Example

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

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

export default MyComponent;

CSS Component

Classes

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 |

Example

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