# @react-md/button

> This package is used to create buttons with the material design spec. There is built-in support to be able to render accessible clickable divs that look like buttons, or even apply button styles to any element.

Latest version **5.1.6** (published 2023-12-11) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 5.1.6 |
| Published | 2023-12-11 |
| First published | 2019-03-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 119.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2324 |
| Author | Mikkel Laursen |
| Maintainers | mlaursen |
| Keywords | accessibility, a11y, react-md, material design, react, button, component, components |

## Links

- npm: https://www.npmjs.com/package/@react-md/button
- Repository: https://github.com/mlaursen/react-md
- Homepage: https://react-md.dev/packages/button/demos
- Issues: https://github.com/mlaursen/react-md/issues
- npm.io page: https://npm.io/package/@react-md/button

## Dependencies (8)

- [classnames](https://npm.io/package/classnames.md) ^2.3.1
- [@react-md/icon](https://npm.io/package/@react-md/icon.md) ^5.1.6
- [@react-md/theme](https://npm.io/package/@react-md/theme.md) ^5.1.6
- [@react-md/utils](https://npm.io/package/@react-md/utils.md) ^5.1.6
- [@react-md/states](https://npm.io/package/@react-md/states.md) ^5.1.6
- [@react-md/elevation](https://npm.io/package/@react-md/elevation.md) ^5.1.6
- [@react-md/transition](https://npm.io/package/@react-md/transition.md) ^5.1.6
- [@react-md/typography](https://npm.io/package/@react-md/typography.md) ^5.1.6

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 5.1.6 (latest) — 2023-12-11
- 3.0.1-alpha.2 (next) — 2021-08-15
- 5.1.3 — 2022-05-07
- 5.1.2 — 2022-04-02
- 5.1.0 — 2022-03-18
- 5.0.0 — 2022-01-31
- 4.0.3 — 2022-01-01
- 4.0.1 — 2021-11-27
- 4.0.0 — 2021-11-24
- 3.1.0 — 2021-09-10
- 3.0.1 — 2021-08-15
- 3.0.1-alpha.1 — 2021-08-15
- 3.0.1-alpha.0 — 2021-08-15
- 3.0.0 — 2021-08-13
- 3.0.0-alpha.0 — 2021-08-11
- … 48 more at https://npm.io/package/@react-md/button/versions

## README

# @react-md/button

Create native buttons with multiple themes based on the material design
specifications including:

- clear, primary, secondary, warning, error, and default theme states
- text, icon, or text + icon with spacing
- flat, outlined, or contained

Also includes a `buttonThemeClassNames` function that can be used to apply a
button theme to _any_ component by generating the required `className` prop.

## Installation

```sh
npm install --save @react-md/button
```

If you would also like dynamic themes and icon support, it is recommended to
also install:

```sh
npm install --save @react-md/theme \
  @react-md/typography \
  @react-md/icon
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/button/demos) for live
examples and more customization information, but an example usage is shown
below.

<!-- DOCS_REMOVE_END -->

## Usage

### Buttons with Text

```tsx
import { render } from "react-dom";
import { Button } from "@react-md/button";

const App = () => (
  <>
    <Button>Text Button</Button>
    <Button theme="primary" themeType="flat">
      Text Button
    </Button>
    <Button theme="secondary" themeType="raised">
      Text Button
    </Button>
    <Button theme="warning" themeType="contained">
      Text Button
    </Button>
    <Button theme="error">Text Button</Button>
    <Button theme="clear">Text Button</Button>
    <Button disabled>Text Button</Button>
  </>
);

render(<App />, document.getElementById("root"));
```

### Buttons with Text and Icons

Buttons can be rendered specifically as icon only buttons or as additional
support to the provided text. When rendering icons, you **must** also install
and use the `@react-md/icon` package to get icon support. You can also install
the `@react-md/material-icons` package if you'd like pre-built components for
every material icon that exists.

```tsx
import { render } from "react-dom";
import { Button } from "@react-md/button";
import { TextIconSpacing, FontIcon } from "@react-md/icon";
import { DeleteSVGIcon } from "@react-md/material-icons";

const App = () => (
  <>
    <Button>
      <TextIconSpacing icon={<FontIcon>info_outline</FontIcon>}>
        About
      </TextIconSpacing>
    </Button>
    <Button theme="primary" themeType="raised">
      <TextIconSpacing icon={<FontIcon>info_outline</FontIcon>} iconAfter>
        About
      </TextIconSpacing>
    </Button>
    <Button theme="error" themeType="contained">
      <TextIconSpacing icon={<DeleteSVGIcon />}>
        Permanently Delete
      </TextIconSpacing>
    </Button>
  </>
);

render(<App />, document.getElementById("root"));
```

If you have used `react-md` in the past, notice that there are no longer any
`icon` related props to handle this for you. It became difficult and confusing
to use when there were a lot of different icon positioning props, so the props
were removed and it is now expected to use the helper components in the
`@react-md/icon` package instead. If you find a reusable pattern within your
app, it is recommended to make your own `Button` wrapper component to implement
this for you.

### Buttons with Icons Only

It is also possible to create buttons that only contain icons as children. For
general accessibility, you should provide either an `aria-label` to provide a
label for the action of the button or use `aria-labelledby` to point to an `id`
of an element that provides a label for the button. This is really to help
screen readers and generally recommended, but there are no restrictions in place
at this time to enforce this behavior.

```tsx
import { render } from "react-dom";
import { Button } from "@react-md/button";
import { TextIconSpacing, FontIcon } from "@react-md/icon";
import { DeleteSVGIcon } from "@react-md/material-icons";

const App = () => (
  <>
    <Button aria-label="More Info" buttonType="icon">
      <FontIcon>info_outline</FontIcon>
    </Button>
    <Button
      theme="primary"
      themeType="raised"
      buttonType="icon"
      aria-label="More Info"
    >
      <FontIcon>info_outline</FontIcon>
    </Button>
    <Button
      theme="error"
      themeType="contained"
      buttonType="icon"
      aria-label="Permanently Delete"
    >
      <DeleteSVGIcon />
    </Button>
  </>
);
```

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