# Buttons

Buttons communicate the action that will occur when the user touches them.

- Module **@pmwcs/button**
- Import styles:
  - Using CSS Loader
    - import '@pmwcs/button/styles';
  - Or include stylesheets
    - **'@material/button/dist/mdc.button.css'**
    - **'@pmwcs/@pmwcs/icon/icon.css'**
    - **'@material/ripple/dist/mdc.ripple.css'**
- MDC Docs: [https://material.io/develop/web/components/buttons/](https://material.io/develop/web/components/buttons/)

```jsx
<Button label="Button" />
```

```jsx
<>
  <Button label="Icon" icon="favorite" />
  <Button label="Trailing" trailingIcon="keyboard_arrow_right" />
  <Button label="Loading" icon={<CircularProgress />} />
</>
```

```jsx
<>
  <Button label="Raised" raised />
  <Button label="Unelevated" unelevated />
  <Button label="Outlined" outlined />
  <Button label="Dense" dense />
  <Button label="No Ripple" ripple={false} />
</>
```

```jsx
<>
  <Button label="Danger" danger raised />
  <Button label="Danger" danger outlined />
  <Button label="Danger" danger />
</>
```

```jsx
<>
  <Button
    label="With Theme"
    raised
    theme={['secondaryBg', 'onSecondary']}
  />
  {/**
    This example uses "accent" to control the color of the Ripple.
    See the documentation on Ripples.
  */}
  <Button label="With Theme" theme="secondary" />
</>
```

```jsx
<Button>
  {/** Alternatively pass content as children */}
  As Children
</Button>
```

## Button
The Button component.

### Props

| Name | Type | Description |
|------|------|-------------|
| `children` | `React.ReactNode` | Content specified as children. |
| `danger` | `undefined \| false \| true` | Used to indicate a dangerous action. |
| `dense` | `undefined \| false \| true` | Make the Button dense. |
| `disabled` | `undefined \| false \| true` | Make the button disabled |
| `activated` | `undefined \| false \| true` | Make the button activated |
| `icon` | `PMWCS.IconPropT` | An Icon for the Button |
| `label` | `React.ReactNode \| any` | Content specified as a label prop. |
| `primary` | `undefined \| false \| true` | Make the button primary. |
| `secondary` | `undefined \| false \| true` | Make the button secondary. |
| `outlined` | `undefined \| false \| true` | Make the button outlined. |
| `raised` | `undefined \| false \| true` | Make the Button raised. |
| `ripple` | `RipplePropT` | Adds a ripple effect to the component |
| `trailingIcon` | `PMWCS.IconPropT` | A trailing icon for the Button |
| `unelevated` | `undefined \| false \| true` | Make the button unelevated. |

## References

- https://material-components.github.io/material-components-web-catalog/#/component/button