1.0.52 • Published 6 years ago

papillon-labels v1.0.52

Weekly downloads
2
License
MIT
Repository
github
Last release
6 years ago

Papillon Labels

version travis build codecov coverage downloads MIT License

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

1.0.52

6 years ago

1.0.51

6 years ago

1.0.50

6 years ago

1.0.49

6 years ago

1.0.48

6 years ago

1.0.47

6 years ago

1.0.46

6 years ago

1.0.45

6 years ago

1.0.44

6 years ago

1.0.43

7 years ago

1.0.42

7 years ago

1.0.41

7 years ago

1.0.40

7 years ago

1.0.39

7 years ago

1.0.36

7 years ago

1.0.35

7 years ago

1.0.31

7 years ago

1.0.30

7 years ago

1.0.29

7 years ago

1.0.28

7 years ago

1.0.19

7 years ago

1.0.18

7 years ago

1.0.17

7 years ago

1.0.16

7 years ago

1.0.15

7 years ago

1.0.14

7 years ago

1.0.13

7 years ago

1.0.12

7 years ago

1.0.11

7 years ago

1.0.10

7 years ago

1.0.9

7 years ago

1.0.8

7 years ago

1.0.7

7 years ago

1.0.6

7 years ago

1.0.5

7 years ago

1.0.4

7 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.1-alpha.0

7 years ago

1.0.0

7 years ago