@times-tooling/button
v5.0.0
Published
> A collection of different buttons
Downloads
148
Readme
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',
]
}