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