Skip to content
React UI Components used in Buttercup products
Branch: master
Clone or download
Latest commit a45e488 May 4, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook Entries list styling Mar 9, 2019
__tests__ Update snapshot May 4, 2019
src Remove commented code May 4, 2019
stories
.babelrc Add @babel/plugin-proposal-object-rest-spread Feb 20, 2019
.editorconfig Add whitespace rules Feb 16, 2019
.gitignore Ignore .DS_Store Mar 28, 2018
.prettierrc Set prettier columns to 100 Mar 28, 2018
.travis.yml Add travis config Mar 14, 2018
LICENSE Change License to MIT May 24, 2017
README.md Update readme for importing GeneratorUserInterface Mar 28, 2018
package-lock.json 2.0.0 May 4, 2019
package.json 2.0.0 May 4, 2019
webpack.config.js Tidy webpack Mar 18, 2019

README.md

Buttercup UI Components

Buttercup npm version Build Status

React UI Components used in Buttercup product series.

Preview Components

yarn install
yarn storybook

Then head to http://localhost:6006/.

Use Components

yarn add @buttercup/ui
# or
npm install @buttercup/ui --save
import { Button } from '@buttercup/ui';

const MyComponent = () => (
  <Button danger>Delete</Button>
);

Available Components

Password generator

The password generator comes bundled in a popover, which can be used like so:

import { Generator } from "@buttercup/ui";

const Comp = () => (
  <Generator
    onGenerate={handleGenerated}
    isOpen={isOpen}
  >
    <div>
      <Button onClick={toggleGenerator}>
        Generate Password
      </Button>
    </div>
  </Generator>
);

If you just require the body of the generator, you can import GeneratorUserInterface instead.

Password Strength Indicator

The indicator can be used like so:

import { Meter } from "@buttercup/ui";

const Comp = () => (
  <Meter input={inputValue} />
);

Button

Available as Button.

TBA.

Input

Available as Input.

TBA.

Center

Available as Center.

TBA.

SmallType

Available as SmallType.

TBA.

Testing

Run npm t to execute the tests.

To update component snapshots run npm run test:updateSnapshots.

You can’t perform that action at this time.