https://github.com/emmabostian/react-button

Created with CodeSandbox
https://github.com/emmabostian/react-button

Last synced: 7 days ago
JSON representation

Created with CodeSandbox

• Host: GitHub
• URL: https://github.com/emmabostian/react-button
• Owner: emmabostian
• Created: 2019-04-14T07:26:48.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-05-08T12:12:07.000Z (over 5 years ago)
• Last Synced: 2024-08-02T17:32:02.404Z (3 months ago)
• Language: JavaScript
• Homepage: https://codesandbox.io/s/github/emmawedekind/react-button
• Size: 418 KB
• Stars: 52
• Watchers: 4
• Forks: 10
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Button

This repository is the code demo from my "Building Design Systems With React" talk I will give at [ReactJS Girls London](https://reactjsgirls.com/#speakers). I will link the deck once the talk has been given.

You can view the live site [here](https://react-button.netlify.com).

## Design

### Light Theme

![Buttons Light](https://user-images.githubusercontent.com/7671983/56490131-6d43ed00-64e4-11e9-8073-569517a1c5e9.jpg)

### Dark Theme

![Buttons Dark](https://user-images.githubusercontent.com/7671983/56490130-6d43ed00-64e4-11e9-906e-72ba20cfbf86.jpg)

## 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



```jsx

 alert("you clicked!")}

  type={ButtonTypes.PRIMARY}

  icon={IconTypes.SAVE}

/>

```

### Dark Theme



```jsx

 alert("you clicked!")}

  type={ButtonTypes.SECONDARY}

/>

```



```jsx

 alert("you clicked!")}

  type={ButtonTypes.PRIMARY}

/>

```