React Button

This repository is the code demo from my "Building Design Systems With React" talk I will give at ReactJS Girls London. I will link the deck once the talk has been given.

You can view the live site here.

Design

Light Theme

Dark Theme

Properties

Property	Description	Type	Required
disabled	Sets the button to a disabled state	boolean	false
icon	Adds an icon to the button	IconType	false
label	The button text	string	true
onClickHandler	The action to be dispatched onClick	function	true
size	The size of the button	ButtonSizes	false
theme	The theme for the button	ButtonThemes	false
type	The type of button	ButtonTypes	false

Types

Type	Values	Default
ButtonSizes	SMALL MEDIUM LARGE	MEDIUM
ButtonThemes	LIGHT DARK	LIGHT
ButtonTypes	PRIMARY SECONDARY TERTIARY	PRIMARY
IconTypes	SAVE NONE	NONE

Examples

Light Theme

<Button
  size={ButtonSizes.MEDIUM}
  label="Button"
  onClickHandler={() => alert("you clicked!")}
  type={ButtonTypes.PRIMARY}
  icon={IconTypes.SAVE}
/>

Dark Theme

<Button
  size={ButtonSizes.MEDIUM}
  label="Button"
  theme={ButtonThemes.DARK}
  onClickHandler={() => alert("you clicked!")}
  type={ButtonTypes.SECONDARY}
/>

<Button
  size={ButtonSizes.SMALL}
  label="Button"
  theme={ButtonThemes.DARK}
  onClickHandler={() => alert("you clicked!")}
  type={ButtonTypes.PRIMARY}
/>