We the Curious button
A button component. Provides customisable button component while staying in keeping with WTC styling.
Install
npm i @wethecurious/wtc-ui-library
Usage
Import it into your project
import { Button, ButtonProps } from '@wethecurious/wtc-ui-library'
Plain button
<Button
label="button label"
isPlain={true}
isDisabled={false}
onClick={action('clicked')}
/>
Bordered Button - filling parent
<Button label="bordered label" fill={true} onClick={action('clicked')} />
Bordered Button (just top left corner) - filling parent
<Button
label="bordered label"
corner={Corner.TopLeft}
onClick={action('clicked')}
/>
Bordered Button - with left icon
// example icon object to pass as prop
const leftIconObj = {
name: IconType.Add,
strokeWidth: '10',
extraStyles: { 'padding-left': '5px', overflow: 'hidden' },
color: {
fill: 'green',
stroke: 'red'
}
}
<Button
label="bordered label"
fill={true}
onClick={action('clicked')}
leftIcon={leftIconObj}
/>
Props
Prop | Description | Default |
---|---|---|
label | Button Label | |
leftIcon | Left Icon configuration | |
rightIcon | Right Icon Configuration | |
fill | Fill parent container | false |
corner | border radius on corners. | |
onClick | click handler for button |