@times-tooling/button

Button

A collection of different buttons

Install

yarn add @times-tooling/button

Usage

import Button from '@times-tooling/button';

<Button />

<Button onClick={doAction} size="large" inverted={true}>
  Click me
</Button>

<Button onClick={doAction} buttonStyle="secondary" icon="coffee">
  Order coffee
</Button>

Props

onClick

Fired when the user clicks the button

(event: React.ClickEvent<HTMLButtonElement>) => void

type

Button type

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type

buttonStyle

Visual style for the button

• primary (default)
• secondary
• tertiary
• textOnly
• back
• close
• create
• icon
• iconBorder
• iconCircle
• cancel

size

Physical size of the button

• small (default)
• large

inverted (Boolean, default: false)

Reverse the colours

selected (Boolean, default: false)

Highlight the button

disabled (Boolean, default: false)

Deactivate the button

icon

The font-awesome icon name

Note: when using font-awesome, you'll need to set up a library of icons in your app, as follows:

import { library } from '@fortawesome/fontawesome-svg-core';
import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';

library.add(faPencilAlt);

...

<Button icon="pencil-alt" />

You can also pass in a specific icon like this:

import { library } from '@fortawesome/fontawesome-svg-core';
import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';

...

<Button icon={faPencilAlt} />

Note: This package includes scss files!

Currently the scss files are not transpiled or bundled. They are only copied from src to lib. In your consuming app you will need to tell Webpack to handle these files by adding the @times-tooling repos to your scss loader. For example:

{
  test: /\.scss$/,
  include: [
      path.resolve(__dirname, 'node_modules/@times-tooling/'),
  ],
  use: [
      'style-loader',
      'css-loader?modules&localIdentName=[path][name]__[local]--[hash:base64:5]',
      'sass-loader',
  ]
}