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}
/>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent