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