# @material/react-button

> Material Components React Button

Latest version **0.15.0** (published 2019-07-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @material/react-button
pnpm add @material/react-button
yarn add @material/react-button
bun add @material/react-button
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.15.0 |
| Published | 2019-07-22 |
| First published | 2018-05-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 96.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | abhiomkar, acdvorak, aprigogin, azakus, bicknellr, bonniez, bwobrien, kfranqueiro, lynnjepsen, material-admin, moog16, patrickrodee, williamernest |
| Keywords | mdc web react, material components react, material design, material button, materialbutton |

## Links

- npm: https://www.npmjs.com/package/@material/react-button
- Repository: https://github.com/material-components/material-components-web-react
- Homepage: https://github.com/material-components/material-components-web-react#readme
- Issues: https://github.com/material-components/material-components-web-react/issues
- npm.io page: https://npm.io/package/@material/react-button

## Dependencies (3)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [@material/button](https://npm.io/package/@material/button.md) ^1.1.0
- [@material/react-ripple](https://npm.io/package/@material/react-ripple.md) ^0.15.0

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 0.15.0 (latest) — 2019-07-22
- 0.14.1 — 2019-07-02
- 0.14.0 — 2019-06-25
- 0.13.0 — 2019-05-30
- 0.12.1 — 2019-05-08
- 0.12.0 — 2019-05-01
- 0.11.0 — 2019-03-19
- 0.10.0 — 2019-02-19
- 0.9.2 — 2019-01-30
- 0.9.1 — 2019-01-30
- 0.9.0 — 2019-01-23
- 0.8.0 — 2018-12-28
- 0.7.1 — 2018-11-30
- 0.7.0 — 2018-11-20
- 0.6.2 — 2018-11-07
- … 9 more at https://npm.io/package/@material/react-button/versions

## README

# React Button

A React version of an [MDC Button](https://github.com/material-components/material-components-web/tree/master/packages/mdc-button).

## Installation

```
npm install @material/react-button
```

## Usage

### Styles

with Sass:
```js
import '@material/react-button/index.scss';
```

with CSS:
```js
import '@material/react-button/dist/button.css';
```

### Javascript Instantiation
```js
import React from 'react';
import Button from '@material/react-button';

class MyApp extends React.Component {
  render() {
    return (
      <Button>
        Click Me!
      </Button>
    );
  }
}
```

## Props

Prop Name | Type | Description
--- | --- | ---
className | String | Classes to be applied to the root element.
raised | Boolean | Enables raised variant.
unelevated | Boolean | Enables unelevated variant.
outlined | Boolean | Enables outlined variant.
dense | Boolean | Enables dense variant.
icon | Element | Icon to render within root element.
trailingIcon | Element | Icon to render on the right side of the element
children | String | Text to be displayed within root element.
disabled | Boolean | Disables button if true.
href | String | Sets a hyperlink & uses anchor tag instead of a button.

## Sass Mixins

Sass mixins may be available to customize various aspects of the Components. Please refer to the
MDC Web repository for more information on what mixins are available, and how to use them.

[Advanced Sass Mixins](https://github.com/material-components/material-components-web/blob/master/packages/mdc-button/README.md#sass-mixins)

## Usage with Icons

Please see our [Best Practices doc](../../docs/best-practices.md#importing-font-icons) when importing or using icon fonts.

---
_Source: https://npm.io/package/@material/react-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._