react-button

KO | EN

gitlite — search

#python #hacktoberfest #ai #typescript #golang #android #machine-learning #rust #windows #cli #kubernetes #awesome-list #mcp #ios

(★ 52)

Created with CodeSandbox

react-button 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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
<Button
  size={ButtonSizes.MEDIUM}
  label="Button"
  onClickHandler={() => alert("you clicked!")}
  type={ButtonTypes.PRIMARY}
  icon={IconTypes.SAVE}
/>
```

### Dark Theme

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

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

react-button

react-button 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

react-button

react-button 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README