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.

import Label from 'papillon-labels'

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>

License

MIT © MTS