Papillon Labels
Labels add metadata or indicate status of items and navigational elements.
This repository is a module of the full papillon repository.
Install
This repository is distributed with npm. After installing npm, you can install papillon-labels
with this command.
$ npm install --save papillon-labels
Explorer
Check out how to use Papillon Labels with React 16, Webpack 4 and Babel 7 here
NPM
Get the latest papillon-labels here
Usage
You can import it like this.
Regular Labels
<Label variant="label-white-on-blue">papillon regular label</Label>
<Label variant="label-white-on-dark-gray">papillon regular label</Label>
<Label variant="label-white-on-green">papillon regular label</Label>
<Label variant="label-white-on-red">papillon regular label</Label>
<Label variant="label-white-on-yellow">papillon regular label</Label>
<Label variant="label-white-on-purple">papillon regular label</Label>
Theme Labels
<Label variant="theme-gray">papillon theme label</Label>
<Label variant="theme-dark-gray">papillon theme label</Label>
<Label variant="theme-orange">papillon theme label</Label>
<Label variant="theme-outline">papillon theme label</Label>
<Label variant="theme-outline-green">papillon theme label</Label>
State Labels
<Label variant="state-default">papillon state label</Label>
<Label variant="state-green">papillon state label</Label>
<Label variant="state-purple">papillon state label</Label>
<Label variant="state-red">papillon state label</Label>
<Label variant="state-default-small">papillon state label</Label>
<Label variant="state-green-small">papillon state label</Label>
<Label variant="state-purple-small">papillon state label</Label>
<Label variant="state-red-small">papillon state label</Label>
<Label variant="state-open" icon="git-pull-request"> Open</Label>
<Label variant="state-closed" icon="git-pull-request"> Closed</Label>
<Label variant="state-merged" icon="git-merge"> Merged</Label>
Counter Labels
<Label variant="counter-default">16</Label>
<Label variant="counter-gray">32</Label>
<Label variant="counter-gray-light">32</Label>
<div className="tabnav"> <nav className="tabnav-tabs" aria-label="Foo bar"> <a href="#url" className="tabnav-tab selected" aria-current="page"> Foo tab <Label variant="counter-default">23</Label> </a> <a href="#url" className="tabnav-tab ml-1"> Bar tab </a> </nav></div>
<div className="Box"> <div className="Box-header"> <h3 className="Box-title"> Box title <Label variant="counter-default">3</Label> </h3> </div> <ul> <li className="Box-row">Box row one</li> <li className="Box-row">Box row two</li> <li className="Box-row">Box row three</li> </ul></div>