Papillon Buttons

Buttons are used for actions, like in forms, while textual hyperlinks are used for destinations, or moving from one page to another.

This repository is a module of the full papillon repository.

Install

This repository is distributed with npm. After installing npm, you can install papillon-buttons with this command.

$ npm install --save papillon-buttons

Explorer

Check out how to use Papillon Buttons with React 16, Webpack 4 and Babel 7 here

NPM

Get the latest papillon-buttons here

Usage

You can import it like this.

import Button from 'papillon-buttons'

Documentation

Buttons are used for actions, like in forms, while textual hyperlinks are used for destinations, or moving from one page to another.

Default

Use the standard—yet classy—.btn for form actions and primary page actions. These are used extensively around the site.

When using a <button> element, always specify a type. When using a <a> element, always add role="button" for accessibility.

  <Button variant="button" onClick={() => {}}>Button</Button>

<button variant="link">Button</button>

You can find them in different sizes: the default .btn, the smaller .btn-sm and the larger .btn-large.

  <Button variant="link"className="btn-sm btn-purple mr-6" onClick={() => {}}>Small link button</Button>
  <Button variant="button"className="btn-sm btn-outline-blue" onClick={() => {}}>Small button button</Button>

  <Button variant="link"className="btn-large btn-purple mr-6" onClick={() => {}}>Large link button</Button>
  <Button variant="button"className="btn-large btn-outline-blue" onClick={() => {}}>Large button button</Button>

Primary button

Primary buttons are green and are used to indicate the primary action on a page. When you need your buttons to stand out, use .btn.btn-primary. You can use it with both button sizes—just add .btn-primary.

  <Button variant="button" className="btn-primary" onClick={() => {}}>Button</Button>
  <Button variant="button" className="btn-primary hover" onClick={() => {}}>hover</Button>
  <Button variant="button" className="btn-primary focus" onClick={() => {}}>focus</Button>
  <Button variant="button" className="btn-primary selected" onClick={() => {}}>selected</Button>
  <Button variant="button" className="btn-primary disabled" onClick={() => {}}>disabled</Button>

Secondary button

  <Button variant="button" className="btn-secondary" onClick={() => {}}>Button</Button>
  <Button variant="button" className="btn-secondary hover" onClick={() => {}}>hover</Button>
  <Button variant="button" className="btn-secondary focus" onClick={() => {}}>focus</Button>
  <Button variant="button" className="btn-secondary selected" onClick={() => {}}>selected</Button>
  <Button variant="button" className="btn-secondary disabled" onClick={() => {}}>disabled</Button>

Danger button

Danger buttons are red. They help reiterate that the intended action is important or potentially dangerous (e.g., deleting a repo or transferring ownership). Similar to the primary buttons, just add .btn-danger.

  <Button variant="button" className="btn-danger" onClick={() => {}}>Button</Button>
  <Button variant="button" className="btn-danger hover" onClick={() => {}}>hover</Button>
  <Button variant="button" className="btn-danger focus" onClick={() => {}}>focus</Button>
  <Button variant="button" className="btn-danger selected" onClick={() => {}}>selected</Button>
  <Button variant="button" className="btn-danger disabled" onClick={() => {}}>disabled</Button>

Outline button

Outline buttons downplay an action as they appear like boxy links. Just add .btn-outline and go.

  <Button variant="button" className="btn-outline" onClick={() => {}}>Button</Button>
  <Button variant="button" className="btn-outline hover" onClick={() => {}}>hover</Button>
  <Button variant="button" className="btn-outline focus" onClick={() => {}}>focus</Button>
  <Button variant="button" className="btn-outline selected" onClick={() => {}}>selected</Button>
  <Button variant="button" className="btn-outline disabled" onClick={() => {}}>disabled</Button>

Blue button

  <Button variant="button" className="btn-blue" onClick={() => {}}>Button</Button>
  <Button variant="button" className="btn-blue hover" onClick={() => {}}>hover</Button>
  <Button variant="button" className="btn-blue focus" onClick={() => {}}>focus</Button>
  <Button variant="button" className="btn-blue selected" onClick={() => {}}>selected</Button>
  <Button variant="button" className="btn-blue disabled" onClick={() => {}}>disabled</Button>

Purple button

  <Button variant="button" className="btn-purple" onClick={() => {}}>Button</Button>
  <Button variant="button" className="btn-purple hover" onClick={() => {}}>hover</Button>
  <Button variant="button" className="btn-purple focus" onClick={() => {}}>focus</Button>
  <Button variant="button" className="btn-purple selected" onClick={() => {}}>selected</Button>
  <Button variant="button" className="btn-purple disabled" onClick={() => {}}>disabled</Button>

Button Link

<button variant="button-link">Button Link</button>

License

MIT © MTS