3.0.0 • Published 6 years ago
@lightspeed/cirrus-label v3.0.0
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-labelOr using npm:
npm i -S @lightspeed/cirrus-labelUsage
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>