@lightspeed/cirrus-label

    3.0.0 • Public • Published

    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>

    Keywords

    none

    Install

    npm i @lightspeed/cirrus-label

    DownloadsWeekly Downloads

    2

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    11.2 kB

    Total Files

    7

    Last publish

    Collaborators

    • kurt.bergeron
    • tombertrand
    • lightspeedhq
    • ls-guillaume-lambert
    • inooid
    • ls-frederic-bouchard
    • x.drdak
    • anomen
    • xena