@malomohq/suede-button/README.md

Material Design buttons for React

# `@malomohq/suede-button`

**[Demo - Text Button](https://codesandbox.io/embed/l5nn946mpq)**

**[Demo - Outlined Button](https://codesandbox.io/embed/nro6yo12jj)**

**[Demo - Contained Button](https://codesandbox.io/embed/w2r0v4831w)**

## Getting Started

```
npm install @malomohq/suede-button

# or

yarn install @malomohq/suede-button
```

`@malomohq/suede-button` requires the `react` and `styled-components` packages as peer dependencies.

## Usage

### `Button.Text`

```js
import Button from '@malomohq/suede-button';

<Button.Text>
  Click Here
</Button.Text>
```

**Details**

* Element type - `button`
* Component type - Structural
* Allows root override - Yes

**Props**

This component will accept any prop supported by the `button` element type.

***

### `Button.Outlined`

```js
import Button from '@malomohq/suede-button';

<Button.Outlined>
  Click Here
</Button.Outlined>
```

**Details**

* Element type - `button`
* Component type - Structural
* Allows root override - Yes

**Props**

This component will accept any prop supported by the `button` element type.

***

### `Button.Contained`

```js
import Button from '@malomohq/suede-button';

<Button.Contained>
  Click Here
</Button.Contained>
```

**Details**

* Element type - `button`
* Component type - Structural
* Allows root override - Yes

**Props**

This component will accept any prop supported by the `button` element type.

***

### `Button.Icon`

```js
import Button from '@malomohq/suede-button';

<Button.Contained>
  <Button.Icon>shopping_cart</Button.Icon>
  Click Here
</Button.Contained>
```

**Details**

* Element type - `i`
* Component type - Structural
* Allows root override - Yes

**Props**

This component will accept any prop supported by the `i` element type.

## Custom Types

To provide a custom root DOM node use the `Root` component exposed on each button type. The `Root` component will apply the styles of that button type to the component you provide.

**Example**

```js
<Button.Text.Root>
  <Link to="/home">Home</Link>
</Button.Text.Root>
```

## See Also

* [@malomohq/suede-elevation](https://github.com/malomohq/suede-elevation)

## Further Reading

* [Material Design - Buttons](https://material.io/design/components/buttons.html)