Badge
to prevent troubles communicating the difference with an input label.
This component/package was renamed to 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>