@hawk-ui/button v4.3.2
Installation
To install a component run
$ npm install @hawk-ui/button --save
Please import CSS styles via
@import '/path__to__node_modules/@hawk-ui/button/dist/index.min.css
Usage
Simple Button:
import Button from '@hawk-ui/button';
<div style={{ display: 'flex', justifyContent: 'space-around' }}>
<Button
type="button"
variant="text"
htmlAttributes={{
id: 'button',
}}
onClick={() => { window.alert('Button Was Clicked'); }}
>
<span>Text Button</span>
</Button>
<Button
type="button"
variant="outlined"
onClick={() => { window.alert('Button Was Clicked'); }}
>
<span>Outlined Button</span>
</Button>
<Button
type="button"
variant="contained"
onClick={() => { window.alert('Button Was Clicked'); }}
>
<span>Contained Button</span>
</Button>
</div>
Disabled Button:
import Button from '@hawk-ui/button';
<div style={{ display: 'flex', justifyContent: 'space-around' }}>
<Button
type="button"
variant="text"
isDisabled
onClick={() => { window.alert('Button Was Clicked'); }}
>
<span>Text Button</span>
</Button>
<Button
type="button"
variant="outlined"
isDisabled
onClick={() => { window.alert('Button Was Clicked'); }}
>
<span>Outlined Button</span>
</Button>
<Button
type="button"
variant="contained"
isDisabled
onClick={() => { window.alert('Button Was Clicked'); }}
>
<span>Contained Button</span>
</Button>
</div>
Icon Button:
import Button from '@hawk-ui/button';
<div style={{ display: 'flex', justifyContent: 'space-around' }}>
<Button
type="button"
variant="text"
icon="fa fa-star"
onClick={() => { window.alert('Button Was Clicked'); }}
>
<span>Text Button</span>
</Button>
<Button
type="button"
variant="outlined"
icon="fa fa-star"
onClick={() => { window.alert('Button Was Clicked'); }}
>
<span>Outlined Button</span>
</Button>
<Button
type="button"
variant="contained"
icon="fa fa-star"
onClick={() => { window.alert('Button Was Clicked'); }}
>
<span>Contained Button</span>
</Button>
</div>
6 months ago
8 months ago
6 months ago
4 months ago
4 months ago
4 months ago
5 months ago
6 months ago
5 months ago
5 months ago
6 months ago
6 months ago
5 months ago
5 months ago
4 months ago
5 months ago
10 months ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago