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/

<Button label="Button" />

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

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

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

<>
  <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" />
</>

<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