Papillon Components

React components for the Primer Design System

Status

⚠️ This project is a work in progress and is not ready for production use yet!

Table of Contents

Alerts

Buttons

Blankslate

Labels

Breadcrumb

Alerts

Install

$ npm install --save papillon-alerts

Import

import { FlashAlert, FlashMessages } from 'papillon-alerts'

Use FlashAlert

<FlashAlert>
  Flash message goes here.
</FlashAlert>

Use FlashMessages

<FlashMessages>
  <FlashAlert>
    Flash message goes here.
  </FlashAlert>
</FlashMessages>

Use all

Find more flavours of FlashAlert and FlashMessages here

Explorer

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

NPM

Get the latest papillon-alerts here

⬆ Back to top

Buttons

Install

$ npm install --save papillon-buttons

Import

import { Button } from 'papillon-buttons'

Use Button

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

Use all

Find more flavours of Button here

Explorer

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

NPM

Get the latest papillon-buttons here

⬆ Back to top

Blankslate

Install

$ npm install --save papillon-blankslate

Import

import { Blankslate } from 'papillon-blankslate'

Use Blankslate

<Blankslate>
  <h3>This is a blank slate</h3>
  <p>Use it to provide information when no dynamic content exists.</p>
</Blankslate>

Use all

Find more flavours of Blankslate here

Explorer

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

NPM

Get the latest papillon-blankslate here

⬆ Back to top

Labels

Install

$ npm install --save papillon-labels

Import

import { Label } from 'papillon-labels'

Use Label

<label variant="label" className="bg-blue">default label</label>

Use all

Find more flavours of Label here

Explorer

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

NPM

Get the latest papillon-labels here

⬆ Back to top

Breadcrumb

Install

$ npm install --save papillon-breadcrumb

Import

import { BreadCrumb } from 'papillon-breadcrumb'

Use BreadCrumb

const items = [{ href: '/business', text: 'Business' }, { href: '/business/customer', text: 'Customers' }, { href: '', text: 'MailChimp' }]

<Breadcrumb items="{items}" selectedIndex="{2}" />

Use all

Find more flavours of BreadCrumb here

Explorer

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

NPM

Get the latest papillon-breadcrumb here

⬆ Back to top