@chantelle/button

The Button component of the Chantelle Pattern Library

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
Minified + gzip package size for @chantelle/button in KB

Readme

Button

Installation

yarn add @chantelle/button

Usage

First, include the CSS in your HTML:

<link rel="stylesheet" href="node_modules/@chantelle/button/dist/styles.css">

Note: you can import the CSS directly into your project if your bundler supports it:

 import '@chantelle/button/dist/styles.css';

React Component

import Button from '@chantelle/button';

ReactDOM.render(
  <Button appearance='primary'>Primary button</Button>,
  container
);

CSS API

To use the Button component, add the .pl-btn to the <button> element to apply the styles.

Appearances

<button type="button" class="pl-btn pl-btn--primary">Primary (default) button</button>
<button type="button" class="pl-btn pl-btn--secondary">Secondary button</button>

Theme

In case of use on a dark background, use the light version of each appearance.

<button type="button" class="pl-btn pl-btn--primary">Primary button</button>
<button type="button" class="pl-btn pl-btn--primary pl-btn--light">Primary light button</button>

Sizes

<button type="button" class="pl-btn pl-btn--small">Small button</button>
<button type="button" class="pl-btn">Normal (default) size button</button>
<button type="button" class="pl-btn pl-btn--large">Large button</button>
<!-- Fill container -->
<button type="button" class="pl-btn pl-btn--fill">Fill container button</button>

State

<button type="button" class="pl-btn pl-btn--active">Active button</button>

Buttons with disabled attribute already apply the disabled styles. The .pl-btn--disabled class is reserved for links that have the .pl-btn class.

<button type="button" class="pl-btn" disabled>Disabled button</button>
<a role="button" class="pl-btn pl-btn--disabled">Disabled anchor button</a>

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.