/react-button

Created with CodeSandbox

Primary LanguageJavaScript

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

Buttons Light

Dark Theme

Buttons Dark

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

image

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

Dark Theme

image

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

image

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