@lightspeed/cirrus-label

Cirrus Label Component

Stats

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

Readme

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>

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.