1 | # React Button
|
2 |
|
3 | A React version of an [MDC Button](https://github.com/material-components/material-components-web/tree/master/packages/mdc-button).
|
4 |
|
5 | ## Installation
|
6 |
|
7 | ```
|
8 | npm install @material/react-button
|
9 | ```
|
10 |
|
11 | ## Usage
|
12 |
|
13 | ### Styles
|
14 |
|
15 | with Sass:
|
16 | ```js
|
17 | import '@material/react-button/index.scss';
|
18 | ```
|
19 |
|
20 | with CSS:
|
21 | ```js
|
22 | import '@material/react-button/dist/button.css';
|
23 | ```
|
24 |
|
25 | ### Javascript Instantiation
|
26 | ```js
|
27 | import React from 'react';
|
28 | import Button from '@material/react-button';
|
29 |
|
30 | class MyApp extends React.Component {
|
31 | render() {
|
32 | return (
|
33 | <Button>
|
34 | Click Me!
|
35 | </Button>
|
36 | );
|
37 | }
|
38 | }
|
39 | ```
|
40 |
|
41 | ## Props
|
42 |
|
43 | Prop Name | Type | Description
|
44 | --- | --- | ---
|
45 | className | String | Classes to be applied to the root element.
|
46 | raised | Boolean | Enables raised variant.
|
47 | unelevated | Boolean | Enables unelevated variant.
|
48 | outlined | Boolean | Enables outlined variant.
|
49 | dense | Boolean | Enables dense variant.
|
50 | icon | Element | Icon to render within root element.
|
51 | trailingIcon | Element | Icon to render on the right side of the element
|
52 | children | String | Text to be displayed within root element.
|
53 | disabled | Boolean | Disables button if true.
|
54 | href | String | Sets a hyperlink & uses anchor tag instead of a button.
|
55 |
|
56 | ## Sass Mixins
|
57 |
|
58 | Sass mixins may be available to customize various aspects of the Components. Please refer to the
|
59 | MDC Web repository for more information on what mixins are available, and how to use them.
|
60 |
|
61 | [Advanced Sass Mixins](https://github.com/material-components/material-components-web/blob/master/packages/mdc-button/README.md#sass-mixins)
|
62 |
|
63 | ## Usage with Icons
|
64 |
|
65 | Please see our [Best Practices doc](../../docs/best-practices.md#importing-font-icons) when importing or using icon fonts.
|