We The Curious Developers

We The Curious Developers

  • Guidelines
  • CuriOs SDK
  • Software
  • Films
  • Art
  • Audio
  • Photography

›Components

Getting Started

  • Getting Started Overview
  • ClI
  • Working With Us

Technical

  • Hardware

Frames

  • Frames Overview
  • Info Panel
  • Media Browser
  • Touch to Start

Components

  • Components Overview
  • Box
  • Button
  • Card
  • Checkbox
  • Header
  • Heading
  • Hero
  • Icon
  • Text Input
  • Markdown Viewer
  • Modal
  • WTCProvider
  • Table
  • Text
  • Video Player
  • Calendar
  • Dropdown
  • InputAutoComplete
  • Radio
  • Sidebar
  • Slider
  • Notification
  • IconNavButton
  • IconSideBar
  • List
  • Tab
  • Title
  • Toggle
  • Value

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

PropDescriptionDefault
labelButton Label
leftIconLeft Icon configuration
rightIconRight Icon Configuration
fillFill parent containerfalse
cornerborder radius on corners.
onClickclick handler for button
Last updated on 5/7/2019
← BoxCard →
  • Install
  • Usage
    • Plain button
    • Bordered Button - filling parent
    • Bordered Button (just top left corner) - filling parent
    • Bordered Button - with left icon
  • Props
Docs
Getting Started (or other categories)Guides (or other categories)API Reference (or other categories)
Community
User ShowcaseStack OverflowProject ChatTwitter
More
BlogGitHubStar
Copyright © 2020 We The Curious