@times-tooling/button

Button

A collection of different buttons

Install

yarn add @times-tooling/button

Usage

import { Button, LinkButton } 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>

<LinkButton />

<Router>
  <LinkButton size="small" to="/route/name">
    Go!
  </LinkButton>
</Router>

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

to (if using <LinkButton />)

React Router route to navigate to

buttonStyle

Visual style for the button

• primary (default)
• secondary

size

Physical size of the button

• large (default)
• small
• tiny

displayMode

Horizontally padded (fixed width or dynamic)

• block (default)
• inline

inverted (Boolean, default: false)

Reverse the colours

centered (Boolean, default: false)

Position it centrally in the parent container

bordered (Boolean, default: false)

Include a border

rounded (Boolean, default: true)

Round the corners

selected (Boolean, default: false)

Highlight the button

disabled (Boolean, default: false)

Deactivate the button

hoverEnabled (Boolean, default: true)

Toggle if the hover effect is visible

textAsIcon (Boolean, default: false)

Treats the children (text) as if it were an icon

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',
  ]
}