@lightspeed/cirrus-label

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>